Установите все флажки при загрузке страницы с помощью jQuery

Question

При загрузке страницы, используя jQuery, как я могу автоматически установить все флажки в определенном div?

Answer 1

$(function(){
    $('#thediv input:checkbox').attr('checked', 'checked');
});

Answer 2

Люди кажутся искренне смущенными тем, как это сделать в jQuery.Проверить флажок гораздо проще и эффективнее без него.Следующее использует сильные стороны jQuery выбора и итерации по списку узлов в сочетании со свойством DOM checked элементов флажка, которое не может быть проще:

$("#myDiv input:checkbox").each(function() {
    this.checked = true;
});

Не так уж сложно вырезать jQueryвсего в этом случае:

var div = document.getElementById("myDiv");
var inputs = div.getElementsByTagName("input");
for (var i = 0, len = inputs.length; i < len; ++i) {
    if (inputs[i].type == "checkbox") {
        inputs[i].checked = true;
    }
}

ОБНОВЛЕНИЕ

С момента выпуска jQuery 1.6 и prop() существует разумный способсделать это в jQuery:

$("#myDiv input:checkbox").prop("checked", true);

Answer 3

То, что есть у redquare , будет работать, но в целом лучше использовать true / false с ними, так как они нормализованы, вот несколько примеров того, почему это удобная привычка следовать. Например:

$('#myDiv :checkbox').attr('checked', 'checked');
alert($('#myDiv :checkbox').attr('checked')); //this alerts true, not "checked"

Вы можете проверить это здесь

Вместо этого возьмите в привычку передавать логическое значение, которое гораздо более универсально, например:

$(function() {
    $('#myDiv :checkbox').attr('checked', true);
});

Это дает гораздо большую гибкость в более кратком коде, например, скажем, у нас есть флажок «Проверить все» вверху, как бы это выглядело?

$('#checkAll').change(function() {
  if(this.checked) {
    $('#subTable :checkbox').attr('checked', 'checked');
  } else {
    $('#subTable :checkbox').removeAttr('checked', 'checked');
  }
});

Теперь нам пришлось ввести новую функцию, чтобы выполнить работу, .removeAttr(). Чтобы быть справедливым, это даже то, как документация jQuery делает это в примере . Но вы можете значительно сократить это, если воспользуетесь преимуществами внутренней нормализации, которую делает jQuery, например:

$('#checkAll').change(function() {
  $('#subTable :checkbox').attr('checked', this.checked);
});

---

Об этом нужно помнить при кодировании, те же правила применяются к .attr('disabled'). Есть и другие области, в которых также происходит нормализация ... возможно, события являются наиболее обширными из них, если вам интересно вы можете видеть, что здесь , это уже сделано для вас, используйте его:)

Answer 4

Это работа в Firefox v.17.01.Еще не тестировал его в других браузерах.

// Установите и установите флажки при загрузке

$('#enable, #enable1, #enable2, #enable3').attr('checked', 'checked');

См. Пример:

JS FIDDLE