如何在選擇第一個單選輸入時選擇所有復選框，並在選擇第二個單選輸入時取消選中所有復選框？ （JavaScript）的

Question

如何在選擇第一個單選輸入時選擇所有復選框，並在選擇第二個單選輸入時取消選中所有復選框？ （JavaScript）的？

我已經在這里研究過以前的類似問題，但是它們似乎都與使用復選框而不是單選按鈕有關，或者沒有取消選擇的方法。

  <input type="radio" class="permission" name="permission" value="select" /> Select All<br>
  <input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>

   <input type="checkbox" class="custom-selector" /> Checkbox  1
   <input type="checkbox" class="custom-selector" /> Checkbox  2
   <input type="checkbox" class="custom-selector" /> Checkbox  3

Answer 1

使用document.querySelectorAll()按類獲取HTML節點列表。 迭代radios使用列表NodeList.forEach()並添加一個change事件監聽到每個單選按鈕。 每當調用偵聽器時，請使用NodeList.forEach()迭代checkboxes數組，並更新每個元素的checked值：

 var checkboxes = document.querySelectorAll('.custom-selector'); var radios = document.querySelectorAll('.permission'); radios.forEach(function(el) { el.addEventListener('change', function(e) { var checked = el.value === 'select'; checkboxes.forEach(function(el) { el.checked = checked; }); }); }); 

 <input type="radio" class="permission" name="permission" value="select" /> Select All<br> <input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br> <input type="checkbox" class="custom-selector" /> Checkbox 1 <input type="checkbox" class="custom-selector" /> Checkbox 2 <input type="checkbox" class="custom-selector" /> Checkbox 3 

Answer 2

您可以使用JQuery做到這一點。

$('.permission').click(function() {
  $('.custom-selector').prop('checked', $(this).val() == 'select');
});

參見下面的代碼片段

 $('.permission').click(function() { $('.custom-selector').prop('checked', $(this).val() == 'select'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" class="permission" name="permission" value="select" /> Select All<br> <input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br> <input type="checkbox" class="custom-selector" /> Checkbox 1 <input type="checkbox" class="custom-selector" /> Checkbox 2 <input type="checkbox" class="custom-selector" /> Checkbox 3 

Answer 3

 function handleChange(e) { if (e.target.value == "select") { handleCheckUncheck(true); } if (e.target.value == "deselect") { handleCheckUncheck(false); } } function handleCheckUncheck(value) { document.querySelectorAll("input[type='checkbox']").forEach(function(val) { val.checked = value; }) } document.querySelectorAll("input[type='radio']").forEach(function(val) { val.addEventListener("change", handleChange); }) 

  <input type="radio" class="permission" name="permission" value="select" /> Select All<br> <input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br> <input type="checkbox" class="custom-selector" /> Checkbox 1 <input type="checkbox" class="custom-selector" /> Checkbox 2 <input type="checkbox" class="custom-selector" /> Checkbox 3 

Answer 4

您無需使用jQuery，就可以通過簡單的方式進行操作。

添加一個復選框，其狀態將設置為其他復選框。

<label><input type="checkbox" onClick="toggle(this)" /> Select All</label>`

並使用此javascript函數，將使用“ custom-selector”類選中其他復選框：

function toggle(source) {
    checkboxes = document.getElementsByName('custom-selector[]');
    for(var i=0, n=checkboxes.length;i<n;i++) {
        checkboxes[i].checked = source.checked;
    }
}

如果某人選中“全選”復選框，則所有其他人也會被選中。 如果取消選擇，效果將相同。

問候！

Answer 5

我同意@OriDrori的回答，您不需要加載jQuery即可完成如此簡單的任務。