특정 부모의 자녀를 얻는 방법?

Question

그런 HTML 세그먼트가 여러 개 있습니다. "check_all"을 클릭했을 때 에 속한 "check_item"이 "shopcart-con"클래스를 확인하고 싶습니다. 그러나 "check_all"을 클릭하면 모든 "check_item"이 확인되었습니다. 그것을 고치는 방법? 감사합니다

HTML :

<div class="shopcart-con" data-merchant-id="1"> 
    <div class="shopcart-list">  
      <div class="shopcart-lstop"><input type="checkbox" class="check_all" name="select"/>fruit shop A</div> 
      <div class="shopcart-lscon"> 
      <ul class="shop_contentul" data-product-id="1"> 
       <li class="checkinp"><input type="checkbox" class="check_item" name="aihao" /></li> 
       <li class="checkimg"><img src="images/home10.png" width="100%" height="75px"></li> 
       <li class="checknum" > 
        <p class="lineheight30">apple</p> 
         <span class="shopcart-num"> 
         <input type="button" name="" class="inp-reduce"> 
         <input type="text" name="" class="num" value="5"> 
         <input type="button" name="" class="inp-add"> 
         </span> 
       </li> 
        ￥<span class="unit_price">8.00</span> 
        <p><font color="#808080" size="2px"><s> $12.00</s></font></p> 
        <p>x<label class="shuli">5</label></p> 
        <input class="delbtn" name=""> 
      </ul> 
      <div class="clear"></div> 
      </div> 
      <div class="shopcart-lscon"> 
      <ul class="shop_contentul" data-product-id="2"> 
       <li class="checkinp"><input type="checkbox" class="check_item" name="aihao" /></li> 
       <li class="checkimg"><img src="images/home10.png" width="100%" height="75px"></li> 
       <li class="checknum" > 
        <span class="shopcart-num"> 
         <input type="button" name="" class="inp-reduce"> 
         <input type="text" name="" class="num" value="5"> 
         <input type="button" name="" class="inp-add"> 
         </span> 
       </li> 
        ￥<span class="unit_price">8.00</span> 
        <!-- <p><font color="#808080" size="2px"><s> $12.00</s></font></p> --> 
        <p>x<label class="shuli">5</label></p> 
        <input class="delbtn" name=""> 
      </ul> 
      <div class="clear"></div> 
      </div> 
      <div> 
       <p class="shopcart-money">共计<label class="product_quantity" data-merchant-id="1">10</label> sum：$<label class="price_sum" data-merchant-id="1" style="color:red">80</label></p> 
      </div> 
</div> 
</div> 

JS :

$('.check_all').click(function(){ 
     var checked_items = $('.check_all').closest('.shopcart-con').find('.check_item') 
     console.log(checked_items.length) 
     if($(this).prop('checked')){ 
      $.each(checked_items, function(i,val){ 
       val.checked = true; 
      }); 
     }else{ 
      $.each(checked_items, function(i,val){ 
       val.checked = false; 
      }); 
     } 
    }); 

Answer 1

이 시도 : 당신은 모든 check_all에서 shopcart-con를 찾을 수 $('.check_all').closest이 사용하고 있습니다. 하지만 당신은 당신이 표시되는 모든 확인란을 반복 할 필요가 없습니다 그 속성을 설정, 당신은 당신의 코드도 단축 할 수있다 따라서 $(this).closest

$('.check_all').click(function(){ 
     var checked_items = $(this).closest('.shopcart-con').find('.check_item') 
     console.log(checked_items.length) 
     if($(this).prop('checked')){ 
      $.each(checked_items, function(i,val){ 
       val.checked = true; 
      }); 
     }else{ 
      $.each(checked_items, function(i,val){ 
       val.checked = false; 
      }); 
     } 
    }); 

DEMO

같은 $(this)를 사용, 클릭 check_all에 대한 shopcart-con을 찾을 필요 코드 아래

$('.check_all').click(function(){ 
     var checked_items = $(this).closest('.shopcart-con').find('.check_item') 
     console.log(checked_items.length) 
     $(checked_items).prop('checked',this.checked); 
    }); 

DEMO