我们的复选框有时候会失效，必须点一遍全选，才能正常使用解决方法

标题 我们的复选框有时候会失效，必须点一遍全选，才能正常使用

这两天老师让我们做一个电商App,其中在购物车页面当中，有一个比较重要的知识点，那就是复选框。

大家可以先看一下我的代码：

<div class="mid-main">
[//]: # （第一个商品:）
        <div class="goods">
            <label for="one">
           <input type="checkbox" id="one">
        </label>
            <div class="pic"></div>
            <div class="zi">
                <h5>商品名称</h5>
                <span class="glide">商品属性规格</span>
                <h5 style="color: red;">￥45</h5>
            </div>
            <div class="count">
                <span>-</span>
                <input type="text" value="10">
                <span>+</span>
            </div>
            <img src="./image/购物车下划线.png" alt="" class="dixian">
        </div>
[//]: # （第二个商品:）
        <div class="goods">
            <label for="two">
           <input type="checkbox" id="two">
        </label>
            <div class="pic"></div>
            <div class="zi">
                <h5>商品名称</h5>
                <span class="glide">商品属性规格</span>
                <h5 style="color: red;">￥45</h5>
            </div>
            <div class="count">
                <span>-</span>
                <input type="text" value="10">
                <span>+</span>
            </div>
            <img src="./image/购物车下划线.png" alt="" class="dixian">
        </div>
         </div>
.....还有几个就不一 一写了，嘻嘻嘻
  <div class="foot-bot">
        <label for="eight">
        <input type="checkbox" class="all" id="eight">
       <h5>已选（2）</h5>
    </label>
       <h6>合计￥<em style="color: red;">168.00</em></h6>
       <a href="./second.html"><span>去结算</span></a>
    </div>

下面是我的jq 代码：

  $(".goods input").change(function(){
      var allChecked=true;
      $(".goods input").each(function(){
         $(this).prop('checked')
         if($(this).prop("checked")==false){
          allChecked=false;
      }
      })
      $(".all").prop("checked",allChecked)
  })
$(".all").change(function(){
    var status=$(this).prop('checked')
    $(".goods input:nth-child(1)").prop("checked",status)
})

聪明的大家可以看出什么问题吗？没错，就是我们的.goods下边有两个input 第一个是我们想要的复选框，第二个也是购物车中常见的商品数量的加减器

这样就会导致我们在选中的时候不止是选中我们想要的复选框，还会选中我们的商品数量的加减器。最终出现的效果就是我们把商品前边的复选框全点之后也，全选前边那个复选框也不会被选中，如下：

所以我们要想办法只选中复选框那个input 这就涉及到了选择器。我使用的是nth-child选择器。把：.goods input改成.goods input:nth-child(1)即可。

希望可以解决大家的一些问题，没事的话可以加个关注，交个朋友呀！！！