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

Question

I have the following set of checkboxes:

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

Using javascript or jquery, How I can make a function to checked/unchecked a subset of a set of checkboxes?

For example: I want that when I press a button labeled, "Select only (Admin)", are checked/unchecked only "Carlos (Admin)" and "Marisa (Admin)" and "Jorge (Admin)" and when I press another button labeled "Select only (Contable)" are checked/unchecked only: “Julieta (Contable)” and “Vicky (Contable)”. Finally, a third button labeled "Select All" to enable checked/unchecked all checboxes.

I have a new problem. I use the set of checkboxes as part of a form. When I click the button "Submit" in the form, all the checkboxes are activated. How I can replace the four buttons "Admin", "Contable", "Apuntes" and "Select All" for four checkboxes with the same names and the same functions as the buttons?.

Answer 1

A good way of doing this is by assiging data attributes to the inputs so that you can filter them correctly.

Here is a 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);
    }   
});

Answer 2

Try this:

Edited version

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

Which needs to use id, like:

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

Demo here

Better practice would be to add data fields to each li, like <li data-function="admin"> , then you could sort them more easy.

EDIT: (adding a ready() function)

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

There was a problem with parentheses in your function. I corrected it and now it works.

Answer 3

jsFiddle DEMO here

The following code works for Admin .. extend this to work for other types of users

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

Here is a more complete version. Based on the response of 'Sergio' above. I added a new button to uncheck all. In addition, and more importantly, when the checkboxes are part of a form, the form button to send the data, affects the function that selects the checkboxes. To avoid this, I wrote a variant. Here the complete code:

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