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

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); 
}

 

posted @ 2018-12-14 21:14  GDBD  阅读(381)  评论(0)  编辑  收藏  举报