码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-12-14 22:53:47      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:btn   move   size   button   click   str   val   for   input   

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

 

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

标签:btn   move   size   button   click   str   val   for   input   

原文地址:https://www.cnblogs.com/mlq2017/p/10121719.html

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