按名称选择复选框的按钮答案

【问题标题】：Buttons to select checkboxes by name按名称选择复选框的按钮
【发布时间】：2016-08-01 11:22:51
【问题描述】：

我在 HTML 表单中有以下复选框。

<ul id="selection">
  <span><label>First<br><input type="checkbox" name="First"></label></span>
  <span><label>Second<br><input type="checkbox" name="Second"></label></span>
  <span><label>Third<br><input type="checkbox" name="Third"></label></span>
  <span><label>Fourth<br><input type="checkbox" name="Fourth"></label></span>
  <span><label>Fifth<br><input type="checkbox" name="Fifth"></label></span>
</ul>

我正在尝试创建两个按钮。一个会选择前两个，一个会选择所有这些。
我设法用一个按钮选择了所有这些：

<input type="button" class="check btn" onClick="select(this)" value="Select All"/>
    <script>
      $('.check:button').click(function(){
          var checked = !$(this).data('checked');
          $('input:checkbox').prop('checked', checked);
          $(this).val(checked ? 'uncheck all' : 'Select' )
          $(this).data('checked', checked);
      });
    </script>

但我似乎无法让这两个按钮工作。
我的 JavaScript 知识非常有限，并且一直在寻找几天，但未能找到有效的解决方案。
可以请人帮忙吗？详细的解释会很棒。

【问题讨论】：

stackoverflow.com/questions/1107220/…

标签： javascript html forms checkbox

【解决方案1】：

试试这个：

$("#selectall").click(function() {
  $("input[type='checkbox']").prop('checked', true);
});
$("#selecttwo").click(function() {
  $("input[name='First'], input[name='Second']").prop('checked', true);
});
$("#resetall").click(function() {
  $("input[type='checkbox']").prop('checked', false);
});

DEMO

【讨论】：

【解决方案2】：

你在找这个吗，https://jsfiddle.net/wx38rz5L/1261/（对 css 感到抱歉：P）或https://jsfiddle.net/wx38rz5L/1262/

参考：https://api.jquery.com/attribute-equals-selector/

$('input[name=First]').prop('checked',true);
$('input[name=Second]').prop('checked',true);

//$('input[name=First],input[name=Second]').prop('checked',true); in one line

【讨论】：