Question

我有一个照片库。每张照片下方都是一个复选框，其ID包含前缀“checkbox_”，后跟照片ID。

<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;
        }
}

该函数的其余部分工作正常，当调用toggleALL（）函数时，它会动画包含DIV（#photoBlob）的背景颜色。但是，我真的无法检查所有复选框，我尝试了很多不同的变化！

有人能看出我做错了什么吗？问题在于这两行：

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);
});

小提琴演示：http://jsfiddle.net/uNeX2/

Answer 3

我认为你在getElementByTagName中缺少一个“s”。试试getElementsByTagName。

这可能也有效：

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

Answer 4

好吧，既然你说过，你有多个名为'photos'的复选框，通过使用函数getElementByName只选择一个元素，不能选择你的游戏。使用jQuery简化了您尝试执行的任务;

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

或更简单;

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

它的js-only，您需要通过getElementsByTagName选择所有输入元素，然后过滤掉那些不符合“照片”名称的输入元素..然后执行任务。

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.

JS / JQuery - 检查所有复选框

8 个答案: