javascript - 如何创建一个函数来选择一组复选框的子集？

Question

我有以下一组复选框:

<ul class="checkbox_list">
 <li><input name="mensajes[receptores_list][]" type="checkbox" value="5" id="mensajes_receptores_list_5" /><label for="mensajes_receptores_list_5">Carlos (Admin)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="1" id="mensajes_receptores_list_1" /><label for="mensajes_receptores_list_1">Jorge (Admin)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="3" id="mensajes_receptores_list_3" /><label for="mensajes_receptores_list_3">Marisa (Admin)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="6" id="mensajes_receptores_list_6" /><label for="mensajes_receptores_list_6">Christian (Apuntes)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="4" id="mensajes_receptores_list_4" /><label for="mensajes_receptores_list_4">Julieta (Contable)</label></li>
<li><input name="mensajes[receptores_list][]" type="checkbox" value="2" id="mensajes_receptores_list_2" /><label for="mensajes_receptores_list_2">Vicky (Contable)</label></li>
</ul> 

使用 javascript 或 jquery，如何创建一个函数来选中/取消选中一组复选框的子集？

例如:我希望当我按下标有“仅选择(管理员)”的按钮时，仅选中/取消选中“Carlos(管理员)”和“Marisa(管理员)”和“Jorge(管理员)”和当我按下另一个标有“仅选择(Contable)”的按钮时，仅选中/取消选中:“Julieta(Contable)”和“Vicky(Contable)”。最后，第三个按钮标记为“全选”，以启用选中/取消选中的所有复选框。

我有一个新问题。我使用这组复选框作为表单的一部分。当我单击表单中的“提交”按钮时，所有复选框都被激活。 如何将四个按钮“Admin”、“Contable”、“Apuntes”和“Select All”替换为四个与按钮具有相同名称和相同功能的复选框？

Answer 1

实现此目的的一个好方法是将数据属性分配给输入，以便您可以正确过滤它们。

这是一个 JS fiddle :http://jsfiddle.net/46ABR/

HTML

<ul id="listOfOptions">
 <li>
    <input name="mensajes[receptores_list][]" type="checkbox" value="5" id="mensajes_receptores_list_5" data-role="admin"/>
    <label for="mensajes_receptores_list_5">Carlos (Admin)</label>
  </li>
  <li>
    <input name="mensajes[receptores_list][]" type="checkbox" value="1" id="mensajes_receptores_list_1" data-role="admin" />
    <label for="mensajes_receptores_list_1">Jorge (Admin)</label>
  </li>
  <li>
    <input name="mensajes[receptores_list][]" type="checkbox" value="3" id="mensajes_receptores_list_3" data-role="admin" />
    <label for="mensajes_receptores_list_3">Marisa (Admin)</label>
  </li>
  <li>
    <input name="mensajes[receptores_list][]" type="checkbox" value="6" id="mensajes_receptores_list_6" data-role="apuntes" />
    <label for="mensajes_receptores_list_6">Christian (Apuntes)</label>
  </li>
  <li>
    <input name="mensajes[receptores_list][]" type="checkbox" value="4" id="mensajes_receptores_list_4" data-role="contable" />
    <label for="mensajes_receptores_list_4">Julieta (Contable)</label>
  </li>
<li>
    <input name="mensajes[receptores_list][]" type="checkbox" value="2" id="mensajes_receptores_list_2" data-role="contable" />
    <label for="mensajes_receptores_list_2">Vicky (Contable)</label>
  </li>
</ul>

<button class="optionsFilterButton" data-role="admin">Select all Admin</button>
<button class="optionsFilterButton" data-role="apuntes">Select all Apuntes</button>
<button class="optionsFilterButton" data-role="contable">Select all Contable</button>
<button class="optionsFilterButton" data-role="">Select all</button>

Javascript

$('.optionsFilterButton').on("click", function(e) {
    var currentButtonEl = $(e.currentTarget);

    $('#listOfOptions input[type=checkbox]').prop('checked', false);

    var role = currentButtonEl.data('role');    
    if (role) {
      $('#listOfOptions input[type=checkbox][data-role=' + role + ']').prop('checked', true);
    } else {
      $('#listOfOptions input[type=checkbox]').prop('checked', true);
    }   
});