jQuery中的checkbox问题
一开始的代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>复选框</title>
- <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#all").click(function () {
- if (this.checked) {
- $("#list :checkbox").each(function () {
- $(this).attr("checked", true); //选择器要有空格隔开
- })
- } else {
- $("#list :checkbox").each(function () {
- $(this).attr("checked", false);
- })
- }
- });
- })
- </script>
- </head>
- <body>
- <ul id="list">
- <li><label><input type="checkbox" value="1">广东省 </label></li>
- <li><label><input type="checkbox" value="2">广西省 </label></li>
- <li><label><input type="checkbox" value="3">河南省 </label></li>
- <li><label><input type="checkbox" value="4">福建省 </label></li>
- <li><label><input type="checkbox" value="5">湖南省 </label></li>
- <li><label><input type="checkbox" value="6">江西省 </label></li>
- </ul>
- <input type="checkbox" id="all">
- <input type="button" value="全选" class="btn" id="selectAll">
- <input type="button" value="全不选" class="btn" id="unSelect">
- <input type="button" value="反选" class="btn" id="reverse">
- <input type="button" value="获得选中的所有值" class="btn" id="getValue">
- </body>
- </html>
当使用带有jQuery的方法attr()时,会有相应的问题存在,比如当你在点击id=all的复选框前去点击id=list下的复选框,这时当你再次点击id=all的复选框时就会出现之前点击的复选框不会发生变化了,一直停留在选中的状态,但是查看元素时发现该复选框的checked值会发生相应的变化。我查了一下资料,问题出在如下:
原来是jQuery版本问题。因为这里用的是attr(),而jQuery的版本用的是3.1.0的,这就存在一个兼容性问题。
$("XXX").attr("attrName");而jQuery的版本用的是2.1.1,这就是存在一个兼容性和稳定性问题。
jQuery API明确说明,1.6+的jQuery要用prop,尤其是checkBox的checked的属性的判断,即使用代码如下:
- $(function() {
- $("#all").click(function () {
- if (this.checked) {
- $("#list :checkbox").each(function () {
- $(this).prop("checked", true); //选择器要有空格隔开
- })
- } else {
- $("#list :checkbox").each(function () {
- $(this).prop("checked", false);
- })
- }
- });
给出使用jQuery事先的全选和全不选:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>复选框</title>
- <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
- <script type="text/javascript">
- $(function() {
- $("#all").click(function () {
- if (this.checked) {
- $("#list :checkbox").each(function () {
- $(this).prop("checked", true); //选择器要有空格隔开
- })
- } else {
- $("#list :checkbox").each(function () {
- $(this).prop("checked", false);
- })
- }
- });
- //第二种
- // $("#all").click(function(){
- // if(this.checked){
- // $("#list :checkbox").prop("checked", true);
- // }else{
- // $("#list :checkbox").prop("checked", false);
- // }
- // });
- //全选
- $("#selectAll").click(function () {
- $("#list :checkbox,#all").prop("checked", true);
- });
- //全不选
- $("#unSelect").click(function () {
- $("#list :checkbox,#all").prop("checked", false);
- });
- //反选
- $("#reverse").click(function () {
- $("#list :checkbox").each(function () {
- // $(this).prop("checked", !$(this).prop("checked"));
- this.checked=!this.checked;
- });
- if($('#list :checkbox:checked').length==$("#list :checkbox").length){
- $("#all").prop("checked",true);
- }
- else{
- $("#all").prop("checked",false);
- }
- });
- //获取选中的值
- $("#getValue").click(function(){
- var valArr = new Array();
- $("#list :checkbox:checked").each(function(i){ //判断被选中的
- valArr[i] = $(this).val();
- })
- var vals = valArr.join(',');//转换为逗号隔开的字符串
- alert(vals);
- });
- })
- </script>
- </head>
- <body>
- <ul id="list">
- <li><label><input type="checkbox" value="1.广东省">广东省 </label></li>
- <li><label><input type="checkbox" value="2.广西省">广西省 </label></li>
- <li><label><input type="checkbox" value="3.河南省">河南省 </label></li>
- <li><label><input type="checkbox" value="4.福建省">福建省 </label></li>
- <li><label><input type="checkbox" value="5.湖南省">湖南省 </label></li>
- <li><label><input type="checkbox" value="6.江西省">江西省 </label></li>
- </ul>
- <input type="checkbox" id="all">
- <input type="button" value="全选" class="btn" id="selectAll">
- <input type="button" value="全不选" class="btn" id="unSelect">
- <input type="button" value="反选" class="btn" id="reverse">
- <input type="button" value="获得选中的所有值" class="btn" id="getValue">
- </body>
- </html>
使用原声JS实现全选和全不选
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <script type="text/javascript">
- function checkAll(name) {
- var el = document.getElementsByTagName('input');
- var len = el.length;
- for(var i=0; i<len; i++) {
- if((el[i].type=="checkbox") && (el[i].name==name)) {
- el[i].checked = true;
- }
- }
- }
- function clearAll(name) {
- var el = document.getElementsByTagName('input');
- var len = el.length;
- for(var i=0; i<len; i++) {
- if((el[i].type=="checkbox") && (el[i].name==name)) {
- el[i].checked = false;
- }
- }
- }
- </script>
- <input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关
- <input type="checkbox" name="test" value="a" /> a
- <input type="checkbox" name="test" value="b" /> b
- <input type="checkbox" name="test" value="c" /> c
- <input type="checkbox" name="test" value="d" /> d
- <input type="checkbox" name="test" value="e" /> e
- <input type="checkbox" name="test" value="f" /> f
- <input type="checkbox" name="test" value="g" /> g
- <br>
- <input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }" /> 数字全选开关 <input type="checkbox" name="num" value="1" /> 1
- <input type="checkbox" name="num" value="2" /> 2
- <input type="checkbox" name="num" value="3" /> 3
- <br><br>
- <input type="button" value="选择所有的字母" onclick="checkAll('test')" /> <input type="button" value="清空选中的字母" onclick="clearAll('test')" /> <br><br>
- <input type="button" value="选择所有的数字" onclick="checkAll('num')" /> <input type="button" value="清空选中的数字" onclick="clearAll('num')" />
- </body>
- </html>
最后插入attr()与prop()的区别:
jquery1.6中新加了一个方法prop(),官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。
大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
那么,什么时候使用attr(),什么时候使用prop()?
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
项目中jquery升级的时候大家要注意这点!
以下是官方建议attr(),prop()的使用:
Attribute/Property | .attr() |
.prop() |
---|---|---|
accesskey | √ | |
align | √ | |
async | √ | √ |
autofocus | √ | √ |
checked | √ | √ |
class | √ | |
contenteditable | √ | |
draggable | √ | |
href | √ | |
id | √ | |
label | √ | |
location ( i.e. window.location ) | √ | √ |
multiple | √ | √ |
readOnly | √ | √ |
rel | √ | |
selected | √ | √ |
src | √ | |
tabindex | √ | |
title | √ | |
type | √ | |
width ( if needed over .width() ) |
√ |
jQuery中的checkbox问题的更多相关文章
- jquery中选择checkbox拼接成字符串,然后到后台拆分取值
jquery中选择checkbox拼接成字符串,然后到后台拆分取值 js中的代码 $("#btn").click(function(){ var chenked=$("i ...
- js jquery中判断checkbox是否被选中的方法
在js中: document.getElementById("checkboxID").checked 返回true或者false jQuery中: $("input ...
- Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox. Radiobutton . DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的 ...
- Jquery中的checkbox 及radio的问题
在web开发中,我们经常会对checkbox和radio进行读写操作,下面我来分享一下我的项目中的相关案例: 一.checkbox <input id="check1" cl ...
- Jquery中对checkbox的各种“全选”或者“取消”功能实现(特别注意1.6+的一定不能使用attr来取属性了!用prop!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery中判断checkbox是否选中与禁用鼠标右键
if ($("#wds_checkbox").attr("checked")) { flag = ; } else { flag = ; } 禁用鼠标右键 // ...
- Jquery 中的CheckBox、 RadioButton、 DropDownList的取值赋值
1.获取选中值,三种方法都可以: $('input:radio:checked').val(): $("input[type='radio']:checked").val(); $ ...
- 使用jQuery获取radio/checkbox组的值的代码收集
<!-- $("document").ready(function(){ $("#btn1").click(function(){ $("[na ...
- Jquery动态在td中添加checkbox
如图:想要在这个id为headId的<td>中,用jquery动态添加checkbox 代码如下 : data是我用ajax 从后台获取的数据,里面含有若干个user类,我想把所有的人名字 ...
随机推荐
- 【原】整理的react相关的一些学习地址,包括 react-router、redux、webpack、flux
因为平时经常去网上找react相关的一些地址,找来找去很麻烦,所以自己整理了一下,不过前面部分不是我整理的, 是出自于:http://www.cnblogs.com/aaronjs/p/4333925 ...
- Tomcat 的 ErrorPage 实现原理分析
使用Tomcat,一定见到过404,500的时候,见到过Tomcat提供的错误页面,例如请求的资源找不到的时候,响应状态码为404,这个时候的错误页面是这样的: 这些错误页面是 如何生成及定位展示的 ...
- js001-JavaScript简介
js001-JavaScript简介 1. JavaScript实现 JavaScript 的三个重要组成部分如下图 1.1.ECMAScript 1.1.1 版本 ...
- List<T> 转换 DataTable
public class List2DataTable { public static string GetClassName(Type type) { if (typ ...
- vs------连接MySQL
转载: http://jingyan.baidu.com/article/8ebacdf023953f49f65cd589.html
- phpcms v9 数据库操作函数
表明默认当前load_model('xxxx')模块所在表名xxxx 若要指定表名 则:操作在mysql.class.php中$this->db->select(...) 1.查询 $ ...
- Sort 整理
文章.图片参考:http://www.jianshu.com/p/1b4068ccd505?hmsr=toutiao.io&utm_medium=toutiao.io&utm_sour ...
- Unable to find vcvarsall.bat的解决办法
明年绝对买MAC电脑,这一两天安装paramiko,真是操碎了心. 安装paramiko时报error: Unable to find vcvarsall.bat这种错误,网上找了各种方法啊,解决的办 ...
- wordpress后台404页面
就在刚刚,boss需要看公司网站后台,网站是用wordpress搭的,发现全是404,蛋疼,于是google,下面是解决办法: location / { if (-f $request_filenam ...
- 一段发工资的shell代码
人事发工资条之前是一个个截图发到我们的邮箱里,看人事妹纸是一个善良而又美丽的姑凉,于是乎写了一段shell代码实现批量发短信至各个手机号.不多说了,上代码,其实很简单,我都不好意思上传,还是记录下吧, ...