分享知识-快乐自己:复选框全选/反选/获取值

Posted mlq2017

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了分享知识-快乐自己:复选框全选/反选/获取值相关的知识,希望对你有一定的参考价值。

1):复选框 全选与反选 、获取选中的值 取消选中的框

1、全选/反选

<body>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<button id="btn">全选</button>
<button id="btn1">取消全选</button>
<script>
    $(document).ready(function () {
        $("#btn").click(function () {
            $(":checkbox").attr("checked", true);
        })
        $("#btn1").click(function () {
            $(":checkbox").attr("checked", false);
        })
    })
</script>
</body>

2、全选/反选

<body>
<div>
    新闻<input type="checkbox"/><br/>
    电影<input type="checkbox"/><br/>
    音乐<input type="checkbox"/><br/>
    娱乐<input type="checkbox"/><br/>
    八卦<input type="checkbox"/><br/>
    直播<input type="checkbox"/><br/>
</div>
<input type="checkbox" onclick="selectAll(this);" />全选/全取消<br/>
<script src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
    function selectAll(checkbox) {
        $(input[type=checkbox]).prop(checked, $(checkbox).prop(checked));
    }
</script>
</body>

3、全选/反选

<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>

3、js获取复选框值

function chk(){ 
    var obj=document.getElementsByName(‘test‘); //选择所有name="‘test‘"的对象,返回数组 
    //取到对象数组后,我们来循环检测它是不是被选中 
    var s=‘‘; 
    for(var i=0; i<obj.length; i++){ 
        if(obj[i].checked) s+=obj[i].value+‘,‘; //如果选中,将value添加到变量s中 
    } 
    //那么现在来检测s的值就知道选中的复选框的值了 
    alert(s==‘‘?‘你还没有选择任何内容!‘:s); 
} 

4、jQuery获取复选框值

function jqchk(){ //jquery获取复选框值 
    var chk_value =[]; 
    $(‘input[name="test"]:checked‘).each(function(){ 
        chk_value.push($(this).val()); 
    }); 
    alert(chk_value.length==0 ?‘你还没有选择任何内容!‘:chk_value); 
} 

 

以上是关于分享知识-快乐自己:复选框全选/反选/获取值的主要内容,如果未能解决你的问题,请参考以下文章

jquery实现全选全不选反选获取选中的所有值总结

vantui组复选框怎么触发全选

js 脚本怎样实现checkbox的全选,反选,类似邮箱中邮件的全选后删除移动

分享知识-快乐自己:初识 Hibernate 概念片

js全选,反选,全不选

angularjs 全选反选