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（管理员）”和当我按下另一个标有“Select only（Contable）”的按钮时，仅选中/取消选中：“Julieta（Contable）”和“Vicky（Contable）”。最后，标有“全选”的第三个按钮启用选中/取消选中所有checbox。

我有一个新问题。我使用复选框作为表单的一部分。当我单击表单中的“提交”按钮时，所有复选框都被激活。如何用四个复选框替换“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>

演示here

更好的做法是向每个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 DEMO here

以下代码适用于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

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

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

5 个答案:

演示here