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，我如何制作一个函数来选中/取消选中一组复选框的子集？

例如：我希望当我按下标记为“仅选择（管理员）”的按钮时，仅选中/取消选中“卡洛斯（管理员）”和“玛丽莎（管理员）”和“豪尔赫（管理员）”，当我按下另一个标记为“仅选择（Contable）”的按钮仅选中/未选中：“Julieta（Contable）”和“Vicky（Contable）”。最后，标记为“全选”的第三个按钮启用选中/取消选中所有复选框。

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

Answer 1

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

这是一个 JS 小提琴：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);
    }   
});

Answer 2

尝试这个：

编辑版本

$('button').on('click', function () {
    $('.checkbox_list li input[type="checkbox"]').prop('checked', false);
    $('.checkbox_list').find('li:contains(' + this.id + ')').each(function () {
        $(this).find('input[type="checkbox"]').prop('checked', true);
    })
});

其中需要使用id，比如：

<button type="button" id="Admin">Admin</button>
<button type="button" id="Contable">Contable</button>
<button type="button" id="Apuntes">Apuntes</button>
<button type="button" id="">Select All</button>

演示在这里

更好的做法是向每个 li 添加数据字段，例如<li data-function="admin">，然后您可以更轻松地对它们进行排序。

编辑：（添加一个 ready() 函数）

$(document).ready(function(){
    $('button').on('click', function () {
        $('.checkbox_list li input[type="checkbox"]').prop('checked', false);
        $('.checkbox_list').find('li:contains(' + this.id + ')').each(function () {
            $(this).find('input[type="checkbox"]').prop('checked', true);
        })
    });
});

您的函数中的括号有问题。我纠正了它，现在它可以工作了。

Answer 3

jsFiddle 演示在这里

以下代码适用于Admin.. 扩展它以适用于其他类型的用户

$('.adminbtn').click(function(e) {
    $('.checkbox_list li input[type="checkbox"]').prop('checked', false);
    var labels = $('label');
    $.each(labels, function(i,val) {

        if(val.innerHTML.indexOf('Admin') > 0)
        {
            labels.eq(i).prev().prop('checked', true);
        }
    });
});

Answer 4

这是一个更完整的版本。基于上述“塞尔吉奥”的回应。我添加了一个新按钮来取消选中所有。此外，更重要的是，当复选框是表单的一部分时，发送数据的表单按钮会影响选择复选框的功能。为了避免这种情况，我写了一个变体。这里是完整的代码：

<html>
<head>

<script type = "text/javascript" src="jquery-1.10.2.js"></script>

</head>

<body>

<form>

<p>Individual selection:</p>
<div  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>

</div> 
<button type="button" id="Admin">Admin</button>
<button type="button" id="Contable">Contable</button>
<button type="button" id="Apuntes">Apuntes</button>
<button type="button" id="">Select All</button>
<button type="button" id="Ninguno">Deselect All</button>

<p>
<button type="button" id="Submit">Submit</button>
</p>

</form>
<script>
$('button').on('click', function () {
    if(this.id !='Submit'){
    $('.checkbox_list li input[type="checkbox"]').prop('checked', false);
    $('.checkbox_list').find('li:contains(' + this.id + ')').each(function () {
        $(this).find('input[type="checkbox"]').prop('checked', true);
    })
    }
});
</script>

</body>

</html>

Answer 5

prop您正在jquery中寻找方法：http: //api.jquery.com/prop/