如何使函数选择一组复选框的子集？

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

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

我有一个新问题。 我将复选框集用作表单的一部分。 当我单击表单中的“提交”按钮时，所有复选框均被激活。 如何替换四个具有与按钮相同名称和功能的复选框的“管理”，“稳定”，“ Apuntes”和“全选”四个按钮？

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

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

<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

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