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

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

文章来源：365jz.com 点击数：335 更新时间：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">

</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()方法后，可以解决此问题；

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

jquery

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

您可能感兴趣的文章:

发表评论 (335人查看，0条评论): 请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

昵称：

最新评论

------分隔线----------------------------

大家感兴趣的内容

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

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询