JQuery radio单选框应用
转载:JQuery判断radio(单选框)是否选中和获取选中值方法总结
一、利用获取选中值判断选中
直接上代码,别忘记引用JQuery包
< html xmlns="http://www.w3.org/1999/xhtml">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>JQuery radio</title>
< script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
< script type="text/javascript" language="javascript">
/*------判断radio是否有选中,获取选中的值--------*/
$(function(){
$("#btnSubmit").click(function(){
var val=$('input:radio[name="sex"]:checked').val();
if(val==null){
alert("什么也没选中!");
return false;
}
else{
alert(val);
}
var list= $('input:radio[name="list"]:checked').val();
if(list==null){
alert("请选中一个!");
return false;
}
else{
alert(list);
}
});
});
< /script>
< /head>
< body>
< form id="form1" >
< input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<br />
< input type="radio" name="list" value="十分满意" />十分满意
<input type="radio" name="list" value="满意" />满意
<input type="radio" name="list" value="不满意" />不满意
<input type="radio" name="list" value="非常差" />非常差
<br />
< input type="submit" value="submit" id="btnSubmit" />
< /form>
< /body>
< /html>
radio不能用“checked”相等来判断,只用用true来判断
$(function () {
$("input").click(function () {
if ($(this).attr("checked")) {
alert("选中了");
}
});
});
</script>
< /head>
< body>
< input type="radio"/>
< /body>
< /html>
二、使用checked属性判断选中
radio不能用“checked”相等来判断,只用用true来判断
$(function () {
$("input").click(function () {
if ($(this).attr("checked")) {
alert("选中了");
}
});
});
</script>
< /head>
< body>
< input type="radio"/>
< /body>
< /html>
三、jquery获取radio单选按钮的值
另:判断radio是否选中并取得选中的值
如下所示:
var item = $(":radio:checked");
var len=item.length;
if(len>0){
alert("yes--选中的值为:"+$(":radio:checked").val());
}
}
四、获取一组radio被选中项的值
五、设置单选按钮被选中
JQuery radio单选框应用的更多相关文章
- jquery 操作input radio 单选框
1.jquery选中单选框 2.jquery 取消单选框 3.判断是否选中 4.设置不可编辑
- Jquery判断单选框是否选中和获取选中的值
第一种:利用选中值判断选中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- radio(单选框)/checkbox(复选框) 美化
由于某种原因,可能需要对单选框(radio)或复选框(checkbox)进行美化,那么直接修改样式是行不通,要实现就需要添加js,以下js依赖于jquery radio.js: function ra ...
- TagHelper+Layui封装组件之Radio单选框
TagHelper+Layui封装组件之Radio单选框 标签名称:cl-radio 标签属性: asp-for:绑定的字段,必须指定 asp-items:绑定单选项 类型为:IEnumerable& ...
- 前端 HTML form表单标签 input标签 type属性 radio 单选框
<input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...
- 纯css3简单实用的checkbox复选框和radio单选框
昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览 源码下载 ...
- 纯css3实现的超炫checkbox复选框和radio单选框
之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览 源码下载 这个实例完全由css3实现 ...
- elementUI 学习入门之 radio 单选框
Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio l ...
- jQuery获取单选框(复选框)选中的状态
jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...
随机推荐
- 04-基本的mysql语句
[转]04-基本的mysql语句 本节课先对mysql的基本语法初体验. 操作文件夹(库) 增 create database db1 charset utf8; 查 # 查看当前创建的数据库 sho ...
- 小程序 js中获取时间new date()的用法(网络复制过来自用)
js中获取时间new date()的用法 获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获 ...
- 设计模式(17)--Mediator(中介者模式)行为型
作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.模式定义: 用一个中介者对象封装一系列的对象交互,中介者使各对象不需要显示地相互作用,从而使耦合松散,而且可以 ...
- vue-scroller记录滚动位置
问题描述: 列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置 解决问题思路: 切换到其他页面前记录位置,返回列表页的时候返回位置.这就需要借助vue-router的bef ...
- AngularJS图片上传功能实践
逻辑理清楚了:service提供FileReader函数,directive提供点击事件的绑定和监听,controller用来修改html上的ng-src属性值 1.HTML <input ty ...
- Oracle中Database Link的创建和Synonyms
在工作中我遇到过这样的一个问题,就是当我需要将远程主机上Oracle数据中某个表的数据copy到本地Oracle时,有多种方法可以实现.1.将所需要的数据导出到csv或其他格式的文档,复制到本地进行直 ...
- CentOS7上Python3.5安装
CentOS7上Python3.5安装 1.下载 https://www.python.org/ftp/python/3.5.2/Python-3.5.2.tgz 2.上传到服务器 3. yum in ...
- 有关 Android Studio 重复引入包的问题和解决方案
虽然相同包名相同类名的文件在不同 SDK 中出现的概率极低,但是一旦出现,处理起来就比较棘手.最好的解决方案就是联系提供 SDK 的技术人员反映问题,让其通过修改源码重新打包一个新的 Jar 包. 还 ...
- Django组件扩展 总结
1. Form组件扩展: 验证用户输入 obj = Form(reuest,POST,request.FILES) if obj.is_valid(): obj.clean_data else: ob ...
- 【three.js练习程序】鼠标滚轮缩放
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...