jQuery之checkbox(复选框)
程序员文章站
2022-06-10 09:36:42
...
业务需求:经常在用户登记中有这样的东西,只选择其中一项或者多项
页面代码
jQuery中它提供了一个方法实现
但是这个方法有局限性,它只是选取二个下标之间的元素
只有手动写了
js原生实现
说明以下来自于:jQuery权威指南代码:针对单个复选框的判断
jQuery方式
DOM方式
页面代码
<input type="checkbox" name="love" value="0"/>电影 <input type="checkbox" name="love" value="1"/>图书 <input type="checkbox" name="love" value="2" checked/>学习 <input type="checkbox" name="love" value="3"/>编程 <input type="button" id="get4" value="设置多选框的值" /><br>
jQuery中它提供了一个方法实现
$(":checkbox[name=love]").slice(1,2).attr("checked",true);
但是这个方法有局限性,它只是选取二个下标之间的元素
只有手动写了
var v = prompt('欢迎你,请输入值',''); var lv = v.split(','); var size = lv.length; $(':checkbox[name=love]').each(function() { this.checked = false; /* for(var i=0;i<size;i++){ if(this.value == lv[i]){ this.checked = true; } }*/ if(v.indexOf(this.value) != -1){ this.checked = true; } });
js原生实现
//js原生实现 //判断是以逗号相连 var lv = v.split(','); var size = lv.length; var loves = document.getElementsByName("love"); var leng = loves.length; for(var i=0;i<leng;i++){ //将原来设置清空 loves[i].checked = false; if(size > 0){ for(var j=0;j<size;j++){ if(loves[i].value == lv[j]){ loves[i].checked = true; break; } } }else{ if(loves[i].value == v){ loves[i].checked = true; } } }
说明以下来自于:jQuery权威指南代码:针对单个复选框的判断
<input type="checkbox" id="cr"/>
jQuery方式
var $cr = $("#cr"); //jQuery对象 $cr.click(function(){ if($cr.is(":checked")){ //jQuery方式判断 alert("感谢你的支持!你可以继续操作!"); } })
DOM方式
var $cr = $("#cr"); //jQuery对象 var cr = $cr.get(0); //DOM对象,获取 $cr[0] $cr.click(function(){ if(cr.checked){ //DOM方式判断 alert("感谢你的支持!你可以继续操作!"); } })
上一篇: 自己如何创业?创业前需要做哪些准备?
推荐阅读
-
ASP.NET中 CheckBox复选框控件的使用
-
在ASP.NET 2.0中操作数据之五十:为GridView控件添加Checkbox
-
jQuery学习笔记之jQuery动画效果
-
ASP.NET中 CheckBox复选框控件的使用
-
Java带复选框的树(Java CheckBox Tree)实现和应用
-
基于spring+hibernate+JQuery开发之电子相册(附源码下载)
-
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
-
javascript 设置某DIV区域内的checkbox复选框
-
在ASP.NET 2.0中操作数据之五十:为GridView控件添加Checkbox
-
js判断checkbox是否被选中(js获取复选框选中的值 )