JS/JQuery - Check All Checkboxes

Question

У меня есть фотогалерея. Под каждой фотографией установлен флажок с идентификатором, содержащим префикс «checkbox_», а затем идентификатор фотографии.

<input type="checkbox" id="checkbox_<%=photoID%>" name="photos"> 

Когда я проверяю флажок «SelectAll», как это:

<input type="checkbox" id="toggleAll" name="toggleAll" onclick="toggleAll()"> 

Я хочу, чтобы проверить/снять все флажки, которые имеют название «фотографии», так что я эту функцию, что должен сделать это ... но это не делает:

function toggleAll() { 
if (document.getElementById('toggleAll').checked == true) 
     { 
     $('.photoBlob').animate({backgroundColor: 'rgba(0,102,204,0.5)'}, 500); 
     $('.photoBlob').animate({backgroundColor: 'rgba(204,204,204,1)'}, 1500); 
     document.getElementByName('photos').checked = true; 
     } 
else 
     { 
     $('.photoBlob').animate({backgroundColor: 'rgba(0,0,0,0)'}, 1000); 
     document.getElementByName('photos').checked = false; 
     } 
} 

остальные функции работает нормально, она одушевляет BAC kground цвета содержащего DIV (#photoBlob), когда вызывается функция toggleALL(). Но я действительно не могу проверить все флажки, и я попробовал так много разных вариантов!

Может ли кто-нибудь увидеть, что я делаю неправильно? Проблема заключается в этих двух направлениях:

document.getElementByName('photos').checked = true; 
document.getElementByName('photos').checked = false; 

Любые предложения с благодарностью получили ...

Answer 1

Вы можете сделать так, не использовать то же имя для нескольких флажков, так как имя пелена быть уникальным. Вместо использования класса.

<input type="checkbox" id="checkbox_<%=photoID%>" class="photos"> 

А.Н. JQuery,

$('#toggleAll').click(function(){ 
    var checked =$(this).attr('checked'); 
    $('.photos').attr('checked', checked); 

} 

Answer 2

$('#toggleAll').click(function(){ 
    $(':checkbox[name="photos"]').prop('checked',this.checked); 
}); 

Fiddle демо: http://jsfiddle.net/uNeX2/

Answer 3

хорошо, так как вы сказали, у вас есть несколько флажков с названием 'фотографии', выбирая только один элемент используя функцию getElementByName, не может быть ур выбором игры. Использование jQuery упрощает задачу, которую вы пытаетесь сделать;

$("input[name=photos]").each(function(elem){ 
    elem.checked=true; 
} 

или более простой;

$("input[name=photos]").attr('checked','checked'); 

его его JS-только Youd нужно выбрать все элементы ввода через getElementsByTagName, а затем отфильтровать те, которые не соответствуют имеющему название «фото» .., а затем сделать вашу задачу.

Answer 4

Я думаю, что вам не хватает «s» в getElementByTagName. Попробуйте getElementsByTagName.

Это может также работать:

$("#toggleAll").click(function() {<br/> 
    $("input[name='photos']").attr("checked",!!$(this).attr("checked")); 
}); 

Answer 5

Вот простой пример использования JQuery:

HTML

<input type="checkbox" id="all" > 
<input type="checkbox" name="photo" > 
<input type="checkbox" name="photo" > 
<input type="checkbox" name="photo" > 
<input type="checkbox" name="photo" > 

JS

$('#all').click(function() { 
    if ($(this).attr('checked') == undefined) { 
     $('input[name=photo]').removeAttr('checked');   
    } 
    else { 
     $('input[name=photo]').attr('checked', 'checked'); 
    } 
}); 

Код: http://jsfiddle.net/b8Y9t/3/

Answer 6

Я хотел бы использовать:

$('.photos:checkbox').attr('checked','checked'); 

Answer 7

Там нет функции называется getElementByName. У вас была ошибка javascript? Я думаю, что это должно быть getElementsByName. Это возвращает список с элементами. Это означает, что вам нужно пройти через него, чтобы проверить все флажки.

BTW Я считаю неправильным использовать имя под названием «фотографии» для флажка, так как флажок является единственным объектом и не отображает сама фотография. Я бы назвал его «photoCheckbox» или «cbPhoto» для очистки, это флажок.

var checkboxList = getElementsByName('photoCheckbox'); // returns list with checkboxes with name 'photoCheckbox' 
if (checkboxList) 
{ 
    for (var i = 0; i < checkboxList.length; i++) 
    { 
    var checkbox = checkboxList[i]; 
    checkbox.checked = false; 
    } 
} 

То, как работает функция getElementsByName. Поэтому, если вы оцените этот метод, вы бы сказали, что это не нужно, поскольку вы уже используете jQuery? Я хотел бы упростить код флажка:

<input type="checkbox" onclick="toggleAll(this)" /> 

Новая функция toggleAll выглядит следующим образом:

function toggleAll(checkbox) 
{ 
    if (checkbox.checked) 
    { 
     $('.photoBlob').animate({backgroundColor: 'rgba(0,102,204,0.5)'}, 500); 
     $('.photoBlob').animate({backgroundColor: 'rgba(204,204,204,1)'}, 1500); // btw why 2 animations on the same elements..? 

     $('input[name="photos"]').prop("checked", true); 
    } 
    else 
    { 
     $('.photoBlob').animate({backgroundColor: 'rgba(0,0,0,0)'}, 1000); 

     $('input[name="photos"]').prop("checked", false); 
    } 
} 

Answer 8

// jquery check all or uncheck all 

$('.checkall').click(function(){  

    var status = 'false'; 

    status = $('.checkall').is(":checked"); 

    //alert ('status is ' + status); // you should see true or false  

    $('.metacheckbox').each(function() { 

    $(this).attr('checked', status); 

    }); 

}); 


<input class="checkall" type="checkbox" />Check/UnCheck All 

<input class="metacheckbox" type="checkbox" id='checkboxone' name="checkboxone" value="Y" /> 

<input class="metacheckbox" type="checkbox" id='checkboxtwo' name="checkboxtwo" value="Y" /> 

<input class="metacheckbox" type="checkbox" id='checkboxthree' name="checkboxthree" value="Y" /> 

this worked for me.