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检查相应的输入。第二种和第三种解决方案只是检查页面上所有复选框的有效方法。

＆＃13;

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

＆＃13;

<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>

＆＃13;

解决方案：使用Vanilla JS检查页面上的所有复选框。

＆＃13;

var inputs = document.getElementsByTagName('input');
var button = document.getElementById('check-all');

button.addEventListener('click', function(){
  for ( var input in inputs ) {
    inputs[input].checked = true;
  }
})

＆＃13;

<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>

＆＃13;

解决方案：使用jQuery检查页面上的所有复选框。

＆＃13;

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

＆＃13;

<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>

＆＃13;

JQuery选择使用Label for的所有Chekbox

2 个答案: