全选/全不选怎么按钮不好使?

$(":button[value='全选/全不选']").click(function(){
        $(":checkbox").is(":checked")?$(":checkbox").attr("checked",false):
        $(":checkbox").attr("checked",true);
    });
                
    $("[value='反选']").click(function(){
        $(":checkbox").each(function(){
            $("this").is(":checked")?$(this).attr("checked",false):
            $(this).attr("checked",true);
            })
    })

下面是html部分：

<input type="checkbox" name="check" value="a"/>a
<input type="checkbox" name="check" value="b"/>b
<input type="checkbox" name="check" value="c"/>c
 <input type="button" value="全选/全不选" id="btn"/>
 <input type="button"  value="反选"  >
 
 希望点击全选和全不选会切换全选状态和全不选状态，点击反选按钮会执行反选，
 问题是我的全选/全不选按钮只能使用一次，即连续点击状态由全不选-全选-选不选再点击就没有反应了，而反选按钮一开始就没反应？？不清楚哪里出了问题？？请高手指点迷津

jquery

阅读 4.7k

3 个回答

得票最新

谢远东

4.5k31628

发布于
2016-03-13

✓ 已被采纳

刚好之前有整理过类似功能，上代码~~

<!Doctype html>
<meta charset='utf8'>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
        //console.log(person.pi)
        $(function(){
 
                $("#all").click(function(){
                        $("form > input").prop('checked', true);
                        $("form > input").attr('checked', true);
                })
 
                $("#none").click(function(){
                        $("form > input").prop('checked', false);
                        $("form > input").attr('checked', false);
                })
                
                $("#rev").click(function(){
                        var all = $("input[type=checkbox]")
                        $(all).each(function(){
                                if($(this).attr('checked')){
 
                                        $(this).attr('checked', false)
                                        $(this).prop('checked', false)
                                } else {
                                        $(this).attr('checked', true)
                                        $(this).prop('checked', true)
                                }
                        })
 
                })
 
                $("#show_btn").click(function(){
                        var all = $("input[type=checkbox]").not(":checked")
                        console.log("未选中的模块" + all.length)
                        $(all).each(function(){
                                console.log($(this).val())
                        })
 
                        var all = $("input[type=checkbox][checked]")
                        console.log("选中的模块" + all.length)
                        $(all).each(function(){
                                console.log($(this).val())
                        })
                })
 
                $("input[type=checkbox]").click(function(){
                        if($(this).attr('checked') == 'checked'){
                                $(this).attr('checked', false)
                        } else {
                                $(this).attr('checked', true)
                        }
                })
                
        })
        
</script>
 
<form id="ckb">
        <input type="checkbox" name="pri" value="查询">查询
        <br>
        <input type="checkbox" name="pri" value="增加" >增加
        <br>
        <input type="checkbox" name="pri" value="修改" >修改
        <br>
        <input type="checkbox" name="pri" value="删除" >删除
        <br>
        <input type="checkbox" name="pri" value="上传" >上传
        <br>
        <input type="checkbox" name="pri" value="重置" >重置
        <br>
        <input type="button" id="all" value="全选"/>
        <input type="button" id="none" value="不选"/>
        <input type="button" id="rev" value="反选"/>
</form>
<input type="button" id="show_btn" value="显示被选项"/>