CheckBoxList выбирает все параметры в jQuery

У меня есть CheckBoxList, и один из вариантов — «Все». Я хочу выбрать все параметры, включая «Все», если пользователь отметил «Все», и если пользователь снял флажок «Все», я хочу очистить выбор. Если они выберут любую другую опцию, кроме «Все», ничего не делайте. Может ли кто-нибудь помочь мне с jQuery, чтобы сделать это? Я использую 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>

THANKS ALL FOR HELPING OUT. HERE IS MY ANSWER -

Привяжите эту функцию к атрибуту onclick для каждого из 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; 
}

jquery select checkboxlist
person Dave    schedule 27.01.2010    source источник

Ответы (2)


arrow_upward
2
arrow_downward

следующее должно работать [обновлено]

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

И более правильно, вместо проверки следующей метки, мы должны проверять метку, которая соответствует нажатому флажку по атрибуту for..

so 

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

может быть

if ( $('label[for="'+$(this).attr('id')+'"]').text() == 'All')
person Gabriele Petrioli    schedule 27.01.2010
comment
Спасибо. Но это динамический список флажков, и поэтому я не могу знать идентификатор опции «Все». Я могу привязать jquery только ко всему списку флажков, как показано выше. Можно ли найти, какая опция была отмечена или не отмечена? То есть определить, проверил ли пользователь опцию «Все» с привязкой jquery ко всему списку? - person Dave; 27.01.2010
comment
@Dave, проверьте изменения выше, которые делают его универсальным - person Gabriele Petrioli; 27.01.2010

arrow_upward
0
arrow_downward

$(документ).готовый(функция() {

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

У этого подхода есть недостаток - функция checkUncheckAll перебирает все флажки в вашей форме и проверяет/снимает все из них. Вы можете сделать это для определенного набора флажков, если вы соответствующим образом назначите их идентификатор (например, checkSpec1, checkSpec2 и т. д.) и обнаружите флажки, идентификатор которых имеет слово checkSpec.

Надеюсь, это поможет.

ваше здоровье

person Arnkrishn    schedule 27.01.2010