如何選擇內選擇的元素

這裏的所有div是我的HTML代碼如何選擇內選擇的元素

<div class="panel-body"> 
    <p> <input name="select_all" type="checkbox" value="1"> Select/Deselect All</p> 

    <div class="input-group"><span class="input-group-addon"> 
     <span><input checked="checked" name="manage_group" type="checkbox" value="1"></span> 
     <span class="form-control">Create/manage groups of candidates</span 
    </div> 

    <div class="input-group"><span class="input-group-addon"> 
     <span><input checked="checked" name="manage_candidate" type="checkbox" value="1"></span> 
     <span class="form-control">Modify candidate details</span> 
    </div> 
</div>

我要檢查所有的複選框（在父DIV）如果「SELECT_ALL」複選框被選中，並取消所有，如果'select_all'未選中。

這裏是我的jQuery代碼：

$(".panel-body p input[type='checkbox']").click(function() { 
    if(this.checked){ 
     //alert('Checked'); 
     var selected = this.closest(".panel-body"); 
     $(selected+"div input[type='checkbox']").each(function() { 
      alert ('Hi'); 
     }); 
    }else{ 
    } 
});

但它無法正常工作。它不接受選擇器內的「選定」變量。如何選擇所選元素中的所有複選框？

來源

2016-03-07 Vijai Pandey

嘗試這樣的，因爲選擇已經是一個jQuery選擇： 'selected.find（「DIV輸入[類型='checkbox']「）' –

selected.find（）does not't work。 Uncaught TypeError：selected.find不是函數 –

你的問題是這樣的一行： -

this.closest(".panel-body");

其中this是元素而不是jQuery對象。

你可以達到你想要的東西，像這樣： -

$(".panel-body p input[type='checkbox']").change(function() { 
 
    var selected = $(this).closest(".panel-body"); 
 
    selected.find("div input[type='checkbox']").prop('checked', this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-body"> 
 
    <p> 
 
    <input name="select_all" type="checkbox" value="1">Select/Deselect All</p> 
 

 
    <div class="input-group"><span class="input-group-addon"> 
 
      <input checked="checked" name="manage_group" type="checkbox" value="1"></span> 
 
    <span class="form-control">Create/manage groups of candidates</span> 
 
    </div> 
 

 
    <div class="input-group"><span class="input-group-addon"> 
 
      <input checked="checked" name="manage_candidate" type="checkbox" value="1"></span> 
 
    <span class="form-control">Modify candidate details</span> 
 
    </div> 
 

 
</div>

來源

2016-03-07 08:49:19 BenG

非常感謝@BenG，我在這裏發表了這篇文章之前幾個小時，讓我感到頭疼。不僅你解決了這個問題，你還教育了我更多的jquery。非常感謝你。 –

你可以像下面這樣做。查找所有checkbox最接近的.panel-body，並根據select_all狀態更改checked屬性。

$(":checkbox[name=select_all]").change(function() { 
 
    $(this).closest('.panel-body').find(':checkbox').not(this).prop('checked', this.checked); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-body"> 
 
    <p> <input name="select_all" type="checkbox" value="1"> Select/Deselect All</p> 
 

 
    <div class="input-group"> 
 
     <span class="input-group-addon"> 
 
      <input checked="checked" name="manage_group" type="checkbox" value="1"> 
 
     </span> 
 
     <span class="form-control">Create/manage groups of candidates</span> 
 
    </div> 
 
    <div class="input-group"> 
 
     <span class="input-group-addon"> 
 
      <input checked="checked" name="manage_candidate" type="checkbox" value="1"> 
 
     </span> 
 
     <span class="form-control">Modify candidate details</span> 
 
    </div> 
 
</div>

來源

2016-03-07 08:48:26 Azim

這很有效。謝謝@Azim –

如何選擇內選擇的元素

回答

相關問題