JS / JQuery-選中所有復選框

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

// 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.

Answer 5

好吧，就像您說的那樣，您有多個名為“照片”的復選框，使用功能getElementByName僅選擇一個元素，不是您的游戲選擇。 使用jQuery可簡化您嘗試執行的任務；

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

或更簡單；

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

其僅用於js，您需要通過getElementsByTagName選擇所有輸入元素，然后過濾出不符合“照片”名稱的元素。然后執行您的任務。

Answer 6

這是使用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 7

我會用：

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

Answer 8

沒有名為getElementByName的函數。 您是否遇到了JavaScript錯誤？ 我認為應該是getElementsByName 。 這將返回包含元素的列表。 這意味着您必須循環搜索它的所有復選框。

順便說一句，我認為為復選框使用名為“照片”的名稱是不正確的，因為復選框是單個對象，並且不會顯示照片本身。 我將其命名為“ 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);
    }
}