如何在JavaScript中使用.siblings（）

如何在ul中輸入ul li輸入複選框項目我有以下JavaScript代碼，適用於大多數複選框，其中腳本確定是否選中多個複選框，如果隱藏其餘部分複選框：如何在JavaScript中使用.siblings（）

var limit = 1; 

$('input[type="checkbox"]').on('change', function(evt) { 
    console.log('checkboxSelectedLimit: detects checkbox'); 
    if ($(this).siblings(':checked').length >= limit) { 
     this.checked = false; 
     console.log('too many checkboxes selected'); 
    } 
});

使用以下HTML結構：

<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1<br> 
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br> 
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br> 
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br> 
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>

然而，當我移動到複選框有序列表如下圖所示：

<ul> 
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2</li> 
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3</li> 
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4</li> 
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5</li> 
    <li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 1</li> 
</ul>

我的javascript確實會觸發它被檢查，但是.siblings()似乎沒有被觸發，因爲它不起作用。我想我很需要更新此腳本目標在ul li項目，然而當我改變：

$('input[type="checkbox"]').on('change', function(evt)

到

$('ul li input[type="checkbox"]').on('change', function(evt)

這是行不通的。

任何幫助將不勝感激的人比我更聰明。

來源

2017-07-24 HollerTrain

這不是您的事件處理程序需要更改。你的問題是你的輸入在列表中時不再是彼此的兄弟姐妹。另外，如果您一次只允許一個複選框被選中，爲什麼不使用單選按鈕呢？ – j08691

好點。我已經改變了代碼在其他地方使用單選按鈕;並使用這個腳本的應用程序的另一部分複選框感謝您帶來了... – HollerTrain

結構是li>輸入，所以你需要找到li對象。

var limit = 1; 
 

 
    $('input[type="checkbox"]').on('change', function(evt) { 
 
     console.log('checkboxSelectedLimit: detects checkbox'); 
 
     if($(this).parent().siblings().find("input[type=checkbox]:checked").length >= limit) { 
 
      this.checked = false; 
 
      console.log('too many checkboxes selected'); 
 
     } 
 
     
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2</li> 
 
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3</li> 
 
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4</li> 
 
<li><input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5</li> 
 
<li><input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1</li> 
 
</ul>

來源

2017-07-24 21:12:25 user2930137

而是那麼你的選擇搭售，您可能想在未來再次改變，然後打破這個一遍，我會建議由名瞄準的複選框DOM結構。

所以不是這一行：

if($(this).siblings(':checked').length >= limit) {

嘗試是這樣的：

if($('input[name=vehicle]:checked').length >= limit) {

甚至更好，搶輸入名稱$（本）動態使用的名稱已經：

if($('input[name=' + $(this).attr('name') + ']:checked').length >= limit) {

來源

2017-07-24 21:42:16

非常好;我喜歡這個 – HollerTrain

如何在JavaScript中使用.siblings（）

回答

相關問題