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

How I can make a function to select a subset of a set of checkboxes?

本文关键字：选择 复选框 子集 一组 何创建 创建 一个 函数      更新时间：2023-09-26

我有以下一组复选框：

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

例如：我希望当我按下标有"仅选择（管理员）"的按钮时，仅选中/取消选中"卡洛斯（管理员）"和"玛丽莎（管理员）"和"

豪尔赫（管理员）"，当我按下另一个标有"仅选择（表格）"的按钮时，仅选中/取消选中："朱丽叶塔（表格）"和"维姬（表格）"。最后，第三个标记为"全选"的按钮以启用选中/取消选中的所有复选框。

我有一个新问题。我使用一组复选框作为表单的一部分。当我单击表单中的"提交"按钮时，所有复选框都被激活。如何将四个按钮"管理员"，"表格"，"Apuntes"和"全选"替换为与按钮具有相同名称和相同功能的四个复选框？

执行此操作的一个好方法是将数据属性与输入相辅相成，以便您可以正确筛选它们。

这是一个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>

爪哇语

$('.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);
    }   
});

试试这个：

编辑版本 

$('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);
        })
    });
});

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

jsFiddle DEMO here（英语：jsFiddle DEMO

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

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

<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>

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

相关文章：