码迷,mamicode.com
首页 > Web开发 > 详细

jquery实现复选框全选,全不选,反选中的问题

时间:2017-08-20 22:28:39      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:rip   for   css   分享   images   func   解决方法   false   attr   

今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法。

html代码如下(这里没有用任何样式,就没有再放css了):

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="test_ch5.css" >
        <title>test_ch5</title>
    </head>
    <body>
        <div id="wrapper">
            <form action="" method="post">
                    <p>你最爱好的运动是?</p>
                    <input type="checkbox" name="items" >足球
                    <input type="checkbox" name="items">篮球
                    <input type="checkbox" name="items">羽毛球
                    <input type="checkbox" name="items">乒乓球<br>
                    <input type="button" id="all" value="全 选">
                    <input type="button" id="no" value="全不选">
                    <input type="button" id="reverse" value="反 选">
                    <input type="button" id="send" value="提 交">
                </form>    
        </div>
    </body>
<script src="jquery-3.2.1.js"></script>
<script>
    $(function(){
        $("#all").click(function(){
            $([name=items]:checkbox).prop(checked,true);
        });
        $("#no").click(function() {
            $([type=checkbox]:checkbox).prop(checked,false);
        });
        $("#reverse").click(function() {
            $(input[name=items]).each(function(){
                $(this).prop(checked,!$(this).prop(checked));
            });
        });

 })
</script>
</html>

界面如下:技术分享

之前不知道有prop,使用prop的地方全部用的是attr,发现实现不了想要的功能啊,然后才发现的prop,它是是jquery1.6以后出来的,用来区别之前的.attr()方法.
区别最大的一点就是:布尔型的属性,1.6以后都是用.prop()方法就好了。
这个布尔型的属性,再解释一下,是属性值只有true|false的属性。
还有种情况就是只添加属性名,不需要写属性值的就可以生效的也同样使用.prop()方法。比如:checked、disable这样的,其实它们说到底还是属于布尔型的属性。

1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();

 

jquery实现复选框全选,全不选,反选中的问题

标签:rip   for   css   分享   images   func   解决方法   false   attr   

原文地址:http://www.cnblogs.com/mengqi-S/p/7401379.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!