CheckBoxList sélectionne toutes les options dans jQuery

Question

J'ai un CheckBoxList et l'une des options est 'All'. Je veux sélectionner toutes les options, y compris All si l'utilisateur a coché 'All' et si l'utilisateur a décoché 'All', je veux effacer les sélections. S'ils sélectionnent une autre option sauf 'Tout', ne faites rien. Quelqu'un peut-il m'aider avec jQuery pour faire cela? J'utilise jQuery 1.2.6

<table border="0" onclick="SelectMe(this);" id="one"> 
<tbody> 
    <tr> 
     <td> 
      <input type="checkbox" checked="checked" name="one$0" id="one_0"/><label for="one_0">All</label> 
     </td> 
     <td> 
      <input type="checkbox" name="two$1" id="two_1"/><label for="two_1">Option One</label> 
     </td> 
     <td> 
      <input type="checkbox" name="three$2" id="three_2"/><label for="three_2">Option Two</label> 
     </td> 
     <td> 
      <input type="checkbox" name="four$3" id="four_3"/><label for="four_3">Option Three</label> 
     </td> 
     <td> 
      <input type="checkbox" name="five$4" id="five_4"/><label for="five_4">Option Four</label> 
     </td> 
    </tr> 
</tbody> 

MERCI POUR TOUS aidais. VOICI MA REPONSE -

Bind cette fonction d'attribuer onclick pour chacun des checkboxlist.items

function selectAll(box) { 

//check if this is 'All' checkbox 

var isAll = ($(box).next('label').text() == 'All'); 

//get the checkboxlist 

var theList = $(box).parents('table:first'); 

    //if 'All' is checked/clicked, check all options 

    if (isAll) { 
    var check = theList.find('input:checkbox')[0].checked; 
    $.each(theList.find('input:checkbox'), function(i, v) { 
     v.checked = check; 
    }); 
    } 

// check 'All' option if all other checkboxes are checked  
else { 
    var allchecked = true; 
    $.each(theList.find('input:checkbox'), function(i, v) { 
     if(i) if (!v.checked) allchecked = false; 
    }); 
    theList.find('input:checkbox')[0].checked = allchecked; 
} 

Answer 1

les éléments suivants doivent travailler [mis à jour]

$(':checkbox').click(function() { 
    // check if the label following the checkbox is 'All' 
    if ($(this).next('label').text() == 'All') 
    { 
    if ($(this).is(':checked')) 
     $(':checkbox').attr('checked', true) 
    else 
     $(':checkbox').attr('checked', false); 
    } 
}); 

Et plus juste, au lieu de en vérifiant l'étiquette suivante, nous devrions vérifier l'étiquette qui correspond à la case à cocher cliquée selon l'attribut for.

si

if ($(this).next('label').text() == 'All') 

pourrait être

if ($('label[for="'+$(this).attr('id')+'"]').text() == 'All') 

Answer 2

$ (document) .ready (function() {

$('input[type=checkbox]').click(function(){  //detects a check box click 
     if ($(this).attr('id').indexOf("one_0") > -1){ //Checks if 'all' check box was clicked 
      checkUncheckAll($(this).attr('checked')); //Function call to check uncheck based on checked/unchecked state of All check box 
     } 
    }); 
}); 

//Function to check uncheck all check boxes 
function checkUncheckAll(checkedValue) { 
    $('input[type=checkbox]').each(function() {   
     this.checked = checkedValue; 
    }); 
} 

Cette approche a un défaut - la fonction checkUncheckAll boucle sur tous les check boîtes dans votre formulaire et les cocher/décocher tous. Vous pouvez le faire pour un ensemble spécifique de cases à cocher, si vous affectez leur ID de manière appropriée (c'est-à-dire checkSpec1, checkSpec2 etc.) et que vous décelez les cases à cocher dont l'ID contient le mot checkSpec.

J'espère que cette aide.

acclamations