您现在的位置: 365建站网 > 365学习 > jQuery判断checkbox是否选中,取消,取值的方法

jQuery判断checkbox是否选中,取消,取值的方法

文章来源:365jz.com     点击数:127    更新时间:2017-12-03 12:45   参与评论

网上大多数文章都提供的方法都是无效的,害死个人,本文中的方法小编亲测试有效,建议使用方法二:

方法一:
if ($("#checkbox-id")get(0).checked) {
    // do something
}

方法二:
if($('#checkbox-id').is(':checked')) {
    // do something
}

方法三:
if ($('#checkbox-id').attr('checked')) {
    // do something
}

完整例子:

<!DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.0 Transitional//EN">  
<HTML>  
<HEAD>  
  <TITLE> New document.nbsp;</TITLE>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <SCRIPT LANGUAGE="JavaScript" src="http://www.cnjQuery.com/demo/jquery.js"></script>  
  <SCRIPT LANGUAGE="javascript">  
  <!--  
   $("document.quot;).ready(function(){  
      
    $("#btn1").click(function(){  
       
    $("[name='checkbox']").attr("checked",'true');//全选  
    
    })  
       $("#btn2").click(function(){  
       
    $("[name='checkbox']").removeAttr("checked");//取消全选  
    
    })  
    $("#btn3").click(function(){  
       
    $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数  
    
    })  
    $("#btn4").click(function(){  
       
    $("[name='checkbox']").each(function(){  
       
     
     if($(this).attr("checked"))  
   {  
    $(this).removeAttr("checked");  
      
   }  
   else 
   {  
    $(this).attr("checked",'true');  
      
   }  
     
    })  
    
    })  
     $("#btn5").click(function(){  
    var str="";  
    $("[name='checkbox'][checked]").each(function(){  
     str+=$(this).val()+""r"n";  
   //alert($(this).val());  
    })  
   alert(str);  
    })  
   })  
  //-->  
  </SCRIPT>  
    
</HEAD>  
 
<BODY>  
<form name="form1" method="post" action="">  
   <input type="button" id="btn1" value="全选">  
   <input type="button" id="btn2" value="取消全选">  
   <input type="button" id="btn3" value="选中所有奇数">  
   <input type="button" id="btn4" value="反选">  
   <input type="button" id="btn5" value="获得选中的所有值">  
   <br>  
   <input type="checkbox" name="checkbox" value="checkbox1">  
   checkbox1  
   <input type="checkbox" name="checkbox" value="checkbox2">  
   checkbox2  
   <input type="checkbox" name="checkbox" value="checkbox3">  
   checkbox3  
   <input type="checkbox" name="checkbox" value="checkbox4">  
   checkbox4  
   <input type="checkbox" name="checkbox" value="checkbox5">  
   checkbox5  
   <input type="checkbox" name="checkbox" value="checkbox6">  
   checkbox6  
   <input type="checkbox" name="checkbox" value="checkbox7">  
   checkbox7  
   <input type="checkbox" name="checkbox" value="checkbox8">  
checkbox8  
</form>  

checkbox选中与取消选择其它例子:
先上代码

<form>
    你爱好的运动是?<br/>
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br/>
    <input type="button" id="CheckAll" value="全选" />
    <input type="button" id="CheckNo" value="全不选" />
    <input type="button" id="CheckRev" value="反选" />
    </form>

  想要实现的是全选,全不选和反选三种效果,其中需要特别注意的是全选按钮这里

<script>
    $(function(){
        $("#CheckAll").click(function(){
            $("input:checkbox").prop("checked","checked");
        });
        $("#CheckNo").click(function(){
            $("input:checkbox").removeAttr("checked");
        });
        $("#CheckRev").click(function(){
            $("input:checkbox").each(function(){
                this.checked=!this.checked;
            });
        });
    });
</script>

  请注意,现在使用的是prop(),如果使用attr(),那么就会出现下面这种情况:

选择“全选”按钮后,正常;点击“全不选”,正常;当这个时候再去点击“全选”按钮时,发现代码那里的“checked”=checked,但是页面上没有显示出来;

使用prop()方法后,可以解决此问题;

。。。。没有测浏览器的兼容。。。。

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (127人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------