多选框的全选、全不选、反选
博客专区 > MissGu 的博客 > 博客详情
多选框的全选、全不选、反选
MissGu 发表于3年前
多选框的全选、全不选、反选
  • 发表于 3年前
  • 阅读 2209
  • 收藏 13
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

要实现多选框的选择相关映射,要实现以下逻辑:

    1、全选框被点击时,所以子选框被选中。

    2、当全选状态下,子选框的其中一个撤销点击,全选框自动unchecked

    3、为全选状态下,子选框一个个全部选中,最后一个子选框框点击之后,全选框自动checked

var information=$("#"+flag).find(".information");
 var $newsCheck = information.find("input[name='newsCheck']");
//多选框全选与全不选
$(".all").click(function(){

        if(this.checked){
            $(this).parents().parents().siblings(".lists").find("input[name='newsCheck']").each(function(){this.checked=true;});
        }else{
            $(this).parents().parents().siblings(".lists").find("input[name='newsCheck']").each(function(){this.checked=false;});
        }
    }
);
//子选框反选
$("input[name='newsCheck']").click(function() {
    var temp=document.getElementsByClassName("all");
    for(var i=0;i<temp.length;i++){
       if(temp[i].id == flag+"All"){
           temp[i].checked=($newsCheck.length ==information.find("input[name='newsCheck']:checked").length ? true : false);
       }
    }
});
<div id="informContent">
    <div class="informTitle title-blue">新闻动态</div>
    <div class="information">
        <div class="informMenu">
            <div class="allcheck"><input type="checkbox"  class="all" id="informContentAll"><span>全选</span></div>
            <div class="threeButton"><img src="images/content/chakan.png"><img src="images/content/xiugai.png"><img src="images/content/shanchu.png"></div>
            <div class="addButton" id="newsPB"><img src="images/content/news.png"></div>
        </div>

        <div class="lists">
         <div class="informList">
                <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
        <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
            
        </div>
    </div>
</div>
<div id="activityContent">
    <div class="informTitle title-red">活动动态</div>
    <div class="information">
        <div class="informMenu">
            <div class="allcheck"><input type="checkbox"  class="all" id="activityContentAll"><span>全选</span></div>
            <div class="threeButton"><img src="images/content/chakan.png"><img src="images/content/xiugai.png"><img src="images/content/shanchu.png"></div>
            <div class="addButton"  id="activityPB"><img src="images/content/tianjia.png"></div>
        </div>

        <div class="lists">
            <div class="informList">
                     <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                     <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                     <div class="newsTitle"><input type="checkbox" name="newsCheck">&nbsp;&nbsp;Facebook叫阵苹果HomeKit 推物联网云平台<img src="images/content/hebing.png" class="more"><span class="newsTime">2015-2-10</span></div>
                 </div>
        </div>
    </div>
</div>

这里我要做一些解释,我在一个页面中涉及了两组多选框,而两组复选框的相关class名称我全都命名为一样,算是想做一个通用的复选样式吧。

$(".all")表示两组复选框的全选checkbox,而两组的子选框name都为newsCheck。变量flag information是用于区分两组多选框的变量。flag有两种值:”informContent“ 和 ”activityContent“,至于具体值怎么转换就要看每个人的项目了。


共有 人打赏支持
粉丝 4
博文 5
码字总数 2899
×
MissGu
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: