zoukankan      html  css  js  c++  java
  • checkbox的使用总结,判断是否选中

    方法一:

    1 if ($("#checkbox-id").get(0).checked) {
    2     // do something
    3 }

    方法二:

    1 if($('#checkbox-id').is(':checked')) {
    2     // do something
    3 }

    方法三:

    1 if ($('#checkbox-id').attr('checked')) {
    2     // do something
    3 }

    方法四:

    1 if ($('#checkbox-id').prop("checked")) {
    2     // do something
    3 }

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

    1 if (ele.checked) { 
    2      // do something
    3  }
    一,$(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);
    5  

    三,使用 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对象的一个属性。

     

     

  • 相关阅读:
    数学人眼中的湖北(五)
    数学人眼中的湖北
    范德蒙德恒等式
    日本高中数学的学习范围
    怎样搞数学竞赛
    单色三角形问题
    shell wait 和sleep 对比
    上传本地文件到github仓库
    windows2008服务器设置系统启动时程序自动运行
    小程序运行报错:errMsg: "request:fail url not in domain list"
  • 原文地址:https://www.cnblogs.com/jackson-yqj/p/7819466.html
Copyright © 2011-2022 走看看