首页 > 其他 > 详细

checkbox的使用总结,判断是否选中

时间:2017-11-11 18:23:44      阅读:239      评论:0      收藏:0      [点我收藏+]

方法一:

if ($("#checkbox-id").get(0).checked) {

    // do something

}

方法二:

if($(‘#checkbox-id‘).is(‘:checked‘)) {

    // do something

}

方法三:

if ($(‘#checkbox-id‘).attr(‘checked‘)) {

    // do something

}
方法四:

if ($(‘#checkbox-id‘).prop("checked")) {

    // do something

}

方法五://属于原生js的方法,存在一点弊端

if (ele.checked) {
     // do something
 }

一,$(ele).is(":checked")
  1. function IsSelect(ele){
  2. //判断checkbox是否被选中  
  3. if($(ele).is(":checked")){      
  4. alert(‘选中‘); 
  5. alert($(ele).val()) 
  6. }  
  7. else{       
  8. alert(‘未选中‘);  
  9. }
  10. }

二,$(ele).prop("checked")

  1. //用jquery全选所有class为listbox的checkbox  
  2. $(".listbox").prop("checked", true);  
  3. //用jquery取消所有class为listbox的checkbox的选中  
  4. $(".listbox").prop("checked", false);

 

三,使用 attr 方法设置选择。

  1. $(function(){
  2.     var checkbox = $("input[type=‘checkbox‘]");
  3.     //全选
  4.     $(‘#select-all‘).click(function(){
  5.         checkbox.attr(‘checked‘, true);
  6.     });
  7.     //反选
  8.     $(‘#select-reverse‘).click(function(){
  9.         checkbox.each(function(i, dom){
  10.             if ( $(dom).attr(‘checked‘) ) {
  11.                 $(dom).removeAttr(‘checked‘);
  12.             } else {
  13.                 $(dom).attr(‘checked‘, ‘checked‘);
  14.             }
  15.         });
  16.     });
  17. });

四,对于jQuery 1.6.0+ 的版本,可以使用prop方法来设置是否选中。

  1. $(function(){
  2.     var checkbox = $("input[type=‘checkbox‘]");
  3.     //全选
  4.     $(‘#select-all‘).click(function(){
  5.         checkbox.prop("checked", true);
  6.     });
  7.     //反选
  8.     $(‘#select-reverse‘).click(function(){
  9.         checkbox.prop("checked", function(index, attr){
  10.             return !attr;
  11.         });
  12.     });
  13. });

五,jQuery中attr和prop方法的区别

rop是jquery1.6新增的方法,其与attr的用法极为相似。由于不理解他们的根本区别,难免产生离奇的BUG。
通过分析attr和prop的源码,得知:
attr方法里面,最关键的两行代码,elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name ),很明显的看出来,使用的DOM的API setAttribute和getAttribute方法操作的属性元素节点。
prop方法里面,最关键的两行代码,return ( elem[ name ] = value )和return elem[ name ],你可以理解成这样document.getElementById(el)[name] = value,这是转化成JS对象的一个属性。

 

 

checkbox的使用总结,判断是否选中

原文:http://www.cnblogs.com/jackson-zhangjiang/p/7819466.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!