JQuery選擇所有使用標籤的Chekboxes

Question

我正在使用名爲magic-check的jquery插件來創建樣式化的複選框。複選框使用以下示例代碼顯示：

<input type="checkbox" class="magic-checkbox" value="4140" id="4140" name="chc"> 
<label for="4140"></label> 

我在創建全選按鈕時遇到了問題。我認爲魔術檢查的CSS隱藏了複選框並對標籤進行了樣式設置。我嘗試了很多方法來解決，但沒有運氣。

Answer 1

在純JavaScript可以這樣寫：

document.querySelectorAll('.magic-checkbox[type="checkbox"]').forEach(function(ele, idx) { 
     ele.setAttribute('checked', 'checked'); 

}）;

相反，在jQuery的你可以這樣寫：

$(':checkbox.magic-checkbox').prop('checked', 'checked'); 

一個例子：

$('#selectall').on('click', function(e) { 
 
    $(':checkbox.magic-checkbox').prop('checked', 'checked'); 
 
}); 
 

 
$('#unSelectall').on('click', function(e) { 
 
    $(':checkbox.magic-checkbox').prop('checked', ''); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://rawgit.com/forsigner/magic-check/master/css/magic-check.min.css"> 
 

 

 
<div> 
 
    <input class="magic-checkbox" type="checkbox" name="layout" id="1"> 
 
    <label for="1">Normal</label> 
 
</div> 
 

 
<div> 
 
    <input class="magic-checkbox" type="checkbox" name="layout" id="2" checked="checked"> 
 
    <label for="2">Checked</label> 
 
</div> 
 

 
<div> 
 
    <input class="magic-checkbox" type="checkbox" name="layout" id="3" disabled="disabled"> 
 
    <label for="3"> 
 
     Disabled 
 
    </label> 
 
</div> 
 

 
<div> 
 
    <input class="magic-checkbox" type="checkbox" name="layout" id="4" checked disabled="disabled"> 
 
    <label for="4">Checked && Disabled</label> 
 
</div> 
 

 
<div> 
 
    <input type="checkbox" class="magic-checkbox" value="4140" id="4140" name="chc"> 
 
    <label for="4140"></label> 
 
</div> 
 

 
<br> 
 
<br> 
 
<button type="button" id="selectall">Select all checkboxes</button> 
 
<button type="button" id="unSelectall">Unselect all checkboxes</button>

Answer 2

第一個解決方案將掃描您的頁面以查找標籤，並使用匹配的ID檢查相應的輸入。第二個和第三個解決方案只是檢查頁面上所有複選框的有效方法。

$('#check-all').on('click', function(){ 
 
    $('label').each(function() { 
 
    var target = $(this).attr('for'); 
 
    $('input[id="' + target + '"]').prop('checked', true); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="1">1</label> 
 
<input id="1" type="checkbox"/> 
 

 
<label for="2">2</label> 
 
<input id="2" type="checkbox"/> 
 

 
<button id="check-all">Check All</button>

解決方法：檢查與香草JS頁面上的所有複選框。

var inputs = document.getElementsByTagName('input'); 
 
var button = document.getElementById('check-all'); 
 

 
button.addEventListener('click', function(){ 
 
    for (var input in inputs) { 
 
    inputs[input].checked = true; 
 
    } 
 
})

<label for="1">1</label> 
 
<input id="1" type="checkbox"/> 
 

 
<label for="2">2</label> 
 
<input id="2" type="checkbox"/> 
 

 
<button id="check-all">Check All</button>

解決方法：檢查與jQuery頁面上的所有複選框。

$('#check-all').on('click', function(){ 
 
    $('input').each(function() { 
 
    this.checked = true; 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label for="1">1</label> 
 
<input id="1" type="checkbox"/> 
 

 
<label for="2">1</label> 
 
<input id="2" type="checkbox"/> 
 

 
<button id="check-all">Check All</button>