2014-10-09 3 views
0

Я пытаюсь установить флажок «Выбрать все» в форме HTML с помощью JQuery 1.9.1. Насколько я могу судить, это должно быть так же просто, как использовать .prop, чтобы установить или снять флажок, но ничего, что я пытаюсь, похоже, работает.флажки проверки jQuery не работают

Пожалуйста, см. Ниже, что я пробовал, я прокомментировал некоторые неудачные попытки, и я не могу заставить это работать даже на один флажок. Каков правильный способ сделать это? Я что-то упустил, возможно, в HTML?

HTML

<input type="checkbox" id="cb_select_all" name="cb_select_all" value="t" /> 
<label for="cb_select_all"><b>Select All</b> 
</label> 
<br /> 
<input type="checkbox" name="cb1" id="cb1" class="cb_all" value="t" /> 
<label for="cb1">1 test</label> 
<br /> 
<input type="checkbox" name="cb2" id="cb2" class="cb_all" value="t" /> 
<label for="cb2">2 test</label> 

Javascript

$(document).ready(function() { 
    $("#cb_select_all").change(cb_select_all_onchange); 
}); //end $(document).ready 

function cb_select_all_onchange() { 
    if ($("#cb_select_all").checked) { 
     //$("#cb1").prop("checked", true); 
     //$(".cb_all").each(function(){ this.checked = true; }); 
     //document.getElementById("cb1").checked = true; 
     $(".cb_all").prop("checked", true); 
    } else { 
     $("#cb1").prop("checked", false); 
    } 
} 

http://jsfiddle.net/mLnb5qed/5/

Спасибо, JDT

ответ

2

Изменить ваш if этому

(or) if ($("#cb_select_all").is(":checked")) { } Проблема в том, что первая является свойством собственного элемента, а не объекта jQuery. Доступ к нему по индексу дает вам возможность использовать это свойство. Второй способ - путь jQuery.

+0

Вы используете селектор ID, '[0]' не нужен, если происходит незаконный HTML. Кроме того, '.checked' - это свойство DOM, а не свойство jQuery. –

+0

@SterlingArcher хорошо, вы серьезно должны знать вещи, я полагаю. Я тоже сказал, что '.checked' является свойством DOM. –

+0

К сожалению, я полностью пропустил это! Ты прав, мой плохой! –

0

Использование

$("#cb_select_all").is(':checked'); 
+0

Можете ли вы рассказать о том, почему этот код решает вопрос оригинального плаката? Ответы только на код, как правило, неодобрительны. – jakerella

+0

Я думаю, что это довольно очевидно, не нужно объяснять, как использовать его в коде ... – Balder

+0

Это не главное, эти типы ответов отмечены значком, поэтому он получил комментарий. Пожалуйста, уточните свой ответ, если это возможно. – jakerella

0

Это работает для меня:

$(document).ready(function() { 
     $("#cb_select_all").change(function() { 
      if ($("#cb_select_all").prop("checked") == true) { 
       $('.cb_all').prop('checked', true); 
      } 
      else { 
       $('.cb_all').prop('checked', false); 
      } 
     }); 
    }); 

Что происходит:

Check if the "cb_select_all" checkbox changes state 
if the "checked" state is set to true 
    check all "cb_all" checkboxes 
else 
    uncheck all "cb_all" checkboxes 
Смежные вопросы