复选框(checkox)全选、全不选、反选、获得选中项值的用例

时间:2023-03-08 16:04:34

复选框(checkox)全选、全不选、反选、获得选中项值的用例

HTML部分:

<div class="all">    <ul>        <li><input type="checkbox" value="图书" /><sapn>图书</sapn></li>        <li><input type="checkbox" value="动漫" /><sapn>动漫</sapn></li>        <li><input type="checkbox" value="电影" /><sapn>电影</sapn></li>        <li><input type="checkbox" value="小说" /><sapn>小说</sapn></li>        <li><input type="checkbox" value="音乐" /><sapn>音乐</sapn></li>        <li><input type="checkbox" value="游戏" /><sapn>游戏</sapn></li>        <li><input type="checkbox" value="论坛" /><sapn>论坛</sapn></li>        <li><input type="checkbox" value="运动" /><sapn>运动</sapn></li>    </ul>    <form action="">        <input type="checkbox" value="全选">        <input type="button" value="全选">        <input type="button" value="全不选">        <input type="button" value="反选">        <input type="button" value="获得选中项的值">    </form></div>

JS部分://全选var num = 0;$(".all form input[value='全选']").click(function(){    num++;    if(num%2==0){        $(".all input[type='checkbox']").each(function(){            $(this).prop("checked",false);        })    }else{        $(".all input[type='checkbox']").each(function(){            $(this).prop("checked",true);        })    }});
//全不选$(".all form input[value='全不选']").click(function(){    $(".all input[type='checkbox']").each(function(){        $(this).attr("checked",false);    })});//反选$(".all form input[value='反选']").click(function(){    if ($(".all form input[value='全选']").is(":checked")== true){        $(".all input[type=checkbox]").prop("checked",false);    }else{        $(".all input[type=checkbox]").prop("checked",true);    }});//获得选中项的值$(".all form input[value='获得选中项的值']").click(function(){        var vals = [];        $(".all li input[type='checkbox']:checked").each(function(i,ele){                vals.push($(this).val());        });        alert(vals);})