Làm cách nào để triển khai chọn một trong tất cả các hộp kiểm của HTML trong HTML?

Tôi có một trang HTML với nhiều hộp kiểm.

Tôi cần thêm một hộp kiểm theo tên "chọn tất cả". Khi tôi chọn hộp kiểm này, tất cả các hộp kiểm trong trang HTML phải được chọn. Tôi có thể làm cái này như thế nào?

<script language="JavaScript">
function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var checkbox in checkboxes)
    checkbox.checked = source.checked;
}
</script>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

CẬP NHẬT:

Cấu for each...intrúc dường như không hoạt động, ít nhất là trong trường hợp này, trong Safari 5 hoặc Chrome 5. Mã này sẽ hoạt động trong tất cả các trình duyệt:

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for(var i=0, n=checkboxes.length;i<n;i++) {
    checkboxes[i].checked = source.checked;
  }
}

Sử dụng jQuery :

// Listen for click on toggle checkbox
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});

HTML:

<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<input type="checkbox" name="checkbox-3" id="checkbox-3" />

<!-- select all boxes -->
<input type="checkbox" name="select-all" id="select-all" />

Tôi không chắc ai đã trả lời theo cách này (sử dụng jQuery ):

  $( '#container .toggle-button' ).click( function () {
    $( '#container input[type="checkbox"]' ).prop('checked', this.checked)
  })

Nó sạch sẽ, không có vòng lặp hoặc nếu / khác mệnh đề và hoạt động như một nét duyên dáng.

Để làm cho nó bỏ chọn:

$('#select_all').click(function(event) {
  if(this.checked) {
      // Iterate each checkbox
      $(':checkbox').each(function() {
          this.checked = true;
      });
  }
  else {
    $(':checkbox').each(function() {
          this.checked = false;
      });
  }
});

Tôi ngạc nhiên không ai nhắc đến document.querySelectorAll(). Giải pháp JavaScript thuần túy, hoạt động trong IE9 +.

function toggle(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i] != source)
            checkboxes[i].checked = source.checked;
    }
}

<input type="checkbox" onclick="toggle(this);" />Check all?<br />

<input type="checkbox" />Bar 1<br />
<input type="checkbox" />Bar 2<br />
<input type="checkbox" />Bar 3<br />
<input type="checkbox" />Bar 4<br />

Bản giới thiệu http://jsfiddle.net/H37cb/

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>

<script type="text/javascript">
$(document).ready(function(){

$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});

});
</script>




<div id="wrapper">
 <li style="margin-top: 20px">
  <input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
  <ul>
   <li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
     <li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
     <li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
     <li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
    </ul>
   </li>
  </ul>
  <ul>
   <li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
    <ul>
     <li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
     <li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
     <li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
    </ul>
   </li>
  </ul>
 </li>
</div>

Phiên bản thay đổi nhẹ kiểm tra và bỏ chọn một cách tôn trọng

$('#select-all').click(function(event) {
        var $that = $(this);
        $(':checkbox').each(function() {
            this.checked = $that.is(':checked');
        });
    });

Khi bạn gọi document.getElementsByName("name"), bạn sẽ nhận được một Object. Sử dụng .item(index)để duyệt qua tất cả các mục của mộtObject

HTML:

<input type="checkbox" onclick="for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked">

<input type=​"checkbox" name=​"rfile" value=​"/​cgi-bin/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​includes/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​misc/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​modules/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​profiles/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​scripts/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​sites/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​stats/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​themes/​">​

<html>

<head>
<script type="text/javascript">

    function do_this(){

        var checkboxes = document.getElementsByName('approve[]');
        var button = document.getElementById('toggle');

        if(button.value == 'select'){
            for (var i in checkboxes){
                checkboxes[i].checked = 'FALSE';
            }
            button.value = 'deselect'
        }else{
            for (var i in checkboxes){
                checkboxes[i].checked = '';
            }
            button.value = 'select';
        }
    }
</script>
</head>

<body>
<input type="checkbox" name="approve[]" value="1" />
<input type="checkbox" name="approve[]" value="2" />
<input type="checkbox" name="approve[]" value="3" />

<input type="button" id="toggle" value="select" onClick="do_this()" />
</body>

</html>

Giải pháp đơn giản của tôi cho phép chọn lọc / bỏ chọn tất cả các hộp kiểm trong một phần nhất định của biểu mẫu , trong khi sử dụng các tên khác nhau cho mỗi hộp kiểm, để có thể dễ dàng nhận ra chúng sau khi biểu mẫu được POST.

Javascript:

function setAllCheckboxes(divId, sourceCheckbox) {
    divElement = document.getElementById(divId);
    inputElements = divElement.getElementsByTagName('input');
    for (i = 0; i < inputElements.length; i++) {
        if (inputElements[i].type != 'checkbox')
            continue;
        inputElements[i].checked = sourceCheckbox.checked;
    }
}

Ví dụ về HTML:

<p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of them</p>
<div id="actors">
    <p><input type="checkbox" name="kevin" />Spacey, Kevin</p>
    <p><input type="checkbox" name="colin" />Firth, Colin</p>
    <p><input type="checkbox" name="scarlett" />Johansson, Scarlett</p>
</div>

Tôi hy vọng bạn thích nó!

Hãy thử JQuery đơn giản này:

$('#select-all').click(function(event) {
  if (this.checked) {
    $(':checkbox').prop('checked', true);
  } else {
    $(':checkbox').prop('checked', false);
  }
});

JavaScript là đặt cược tốt nhất của bạn. Liên kết dưới đây đưa ra một ví dụ sử dụng các nút để bỏ / chọn tất cả. Bạn có thể thử điều chỉnh nó để sử dụng hộp kiểm, chỉ cần sử dụng bạn 'chọn tất cả' hộp kiểm 'thuộc tính onClick.

Chức năng Javascript để kiểm tra hoặc bỏ chọn tất cả các hộp kiểm

Trang này có một ví dụ đơn giản hơn

http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

Mẫu này hoạt động với JavaScript gốc nơi tên biến của hộp kiểm thay đổi, nghĩa là không phải tất cả "foo".

<!DOCTYPE html>
<html>
<body>

<p>Toggling checkboxes</p>
<script>
function getcheckboxes() {
    var node_list = document.getElementsByTagName('input');
    var checkboxes = [];
    for (var i = 0; i < node_list.length; i++) 
    {
        var node = node_list[i];
        if (node.getAttribute('type') == 'checkbox') 
    {
            checkboxes.push(node);
        }
    } 
    return checkboxes;
}
function toggle(source) {
  checkboxes = getcheckboxes();
  for(var i=0, n=checkboxes.length;i<n;i++) 
  {
    checkboxes[i].checked = source.checked;
  }
}
</script>


<input type="checkbox" name="foo1" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo2" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo3" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo4" value="bar4"> Bar 4<br/>

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

</body>
</html>

<asp:CheckBox ID="CheckBox1" runat="server" Text="Select All" onclick="checkAll(this);" />
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem Value="Item 1">Item 1</asp:ListItem>
    <asp:ListItem Value="Item 2">Item 2</asp:ListItem>
    <asp:ListItem Value="Item 3">Item 3</asp:ListItem>
    <asp:ListItem Value="Item 4">Item 4</asp:ListItem>
    <asp:ListItem Value="Item 5">Item 5</asp:ListItem>
    <asp:ListItem Value="Item 6">Item 6</asp:ListItem>
</asp:CheckBoxList>

<script type="text/javascript">
    function checkAll(obj1) {
        var checkboxCollection = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName('input');

        for (var i = 0; i < checkboxCollection.length; i++) {
            if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
                checkboxCollection[i].checked = obj1.checked;
            }
        }
    }
</script>

Điều đó sẽ làm công việc được thực hiện:

    $(':checkbox').each(function() {
        this.checked = true;                        
    });

$(document).ready(function() {
                $(document).on(' change', 'input[name="check_all"]', function() {
                    $('.cb').prop("checked", this.checked);
                });
            });

Sử dụng jQuery và loại trực tiếp:

Với hộp kiểm chính ràng buộc này vẫn đồng bộ với các hộp kiểm thiếu, nó sẽ bị bỏ chọn trừ khi tất cả các hộp kiểm được chọn.

ko.bindingHandlers.allChecked = {
  init: function (element, valueAccessor) {
    var selector = valueAccessor();

    function getChecked () {
      element.checked = $(selector).toArray().every(function (checkbox) {
        return checkbox.checked;
      });
    }

    function setChecked (value) {
      $(selector).toArray().forEach(function (checkbox) {
        if (checkbox.checked !== value) {
          checkbox.click();
        }
      });
    }

    ko.utils.registerEventHandler(element, 'click', function (event) {
      setChecked(event.target.checked);
    });

    $(window.document).on('change', selector, getChecked);

    ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
      $(window.document).off('change', selector, getChecked);
    });

    getChecked();
  }
};

trong html:

<input id="check-all-values" type="checkbox" data-bind="allChecked: '.checkValue'"/>
<input id="check-1" type="checkbox" class="checkValue"/>
<input id="check-2" type="checkbox" class="checkValue"/>

Bạn có thể có các bộ hộp kiểm khác nhau trên cùng một biểu mẫu . Đây là một giải pháp chọn / bỏ chọn các hộp kiểm theo tên lớp, sử dụng hàm vanilla javascript document.getElementsByClassName

Nút Chọn tất cả

<input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All

Một số hộp kiểm để chọn

<input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' />
<input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' />

Các javascript

    function selectAll() {
        var blnChecked = document.getElementById("select_all_invoices").checked;
        var check_invoices = document.getElementsByClassName("check_invoice");
        var intLength = check_invoices.length;
        for(var i = 0; i < intLength; i++) {
            var check_invoice = check_invoices[i];
            check_invoice.checked = blnChecked;
        }
    }

Đây là những gì nó sẽ làm, ví dụ nếu bạn có 5 hộp kiểm, và bạn bấm kiểm tra tất cả, nó sẽ kiểm tra tất cả, bây giờ nếu bạn bỏ chọn tất cả các hộp kiểm có thể bằng cách nhấp vào mỗi 5 hộp kiểm, khi bạn bỏ chọn hộp kiểm cuối cùng, hãy chọn tất cả các hộp kiểm cũng được bỏ chọn

$("#select-all").change(function(){
   $(".allcheckbox").prop("checked", $(this).prop("checked"))
  })
  $(".allcheckbox").change(function(){
      if($(this).prop("checked") == false){
          $("#select-all").prop("checked", false)
      }
      if($(".allcheckbox:checked").length == $(".allcheckbox").length){
          $("#select-all").prop("checked", true)
      }
  })

Như tôi không thể nhận xét, đây là câu trả lời: Tôi sẽ viết giải pháp của Can Berk Güder theo cách tổng quát hơn, vì vậy bạn có thể sử dụng lại chức năng cho các hộp kiểm khác

<script language="JavaScript">
  function toggleCheckboxes(source, cbName) {
    checkboxes = document.getElementsByName(cbName);
    for (var i = 0, n = checkboxes.length; i < n; i++) {
      checkboxes[i].checked = source.checked;
    }
  }
</script>

<input type="checkbox" onClick="toggleCheckboxes(this,\'foo\')" /> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
<input type="checkbox" name="foo" value="bar5"> Bar 5<br/>

Nếu chấp nhận câu trả lời hàng đầu cho jquery, hãy nhớ rằng đối tượng được truyền cho hàm nhấp là EventHandler, không phải đối tượng hộp kiểm gốc. Do đó mã shoudl được sửa đổi như sau.

Html

<input type="checkbox" name="selectThemAll"/> Toggle All<br/>

<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

Javascript

$(function() {
    jQuery("[name=selectThemAll]").click(function(source) { 
        checkboxes = jQuery("[name=foo]");
        for(var i in checkboxes){
            checkboxes[i].checked = source.target.checked;
        }
    });
})

Đây là một triển khai backbone.js:

events: {
    "click #toggleChecked" : "toggleChecked"
},
toggleChecked: function(event) {

    var checkboxes = document.getElementsByName('options');
    for(var i=0; i<checkboxes.length; i++) {
        checkboxes[i].checked = event.currentTarget.checked;
    }

},

html

<input class='all' type='checkbox'> All
<input class='item' type='checkbox' value='1'> 1
<input class='item' type='checkbox' value='2'> 2
<input class='item' type='checkbox' value='3'> 3

javascript

$(':checkbox.all').change(function(){
  $(':checkbox.item').prop('checked', this.checked);
});

1: Thêm Trình xử lý sự kiện onchange

<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>

2: Sửa đổi mã để xử lý kiểm tra / bỏ chọn

 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }

Các phương pháp dưới đây rất dễ hiểu và bạn có thể triển khai các biểu mẫu hiện có trong vài phút

Với Jquery,

$(document).ready(function() {
  $('#check-all').click(function(){
    $("input:checkbox").attr('checked', true);
  });
  $('#uncheck-all').click(function(){
    $("input:checkbox").attr('checked', false);
  });
});

ở dạng HTML, đặt các nút bên dưới

<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a> 

Chỉ với việc sử dụng javascript,

<script type="text/javascript">
function checkAll(formname, checktoggle)
{
  var checkboxes = new Array(); 
  checkboxes = document[formname].getElementsByTagName('input');

  for (var i=0; i<checkboxes.length; i++)  {
    if (checkboxes[i].type == 'checkbox')   {
      checkboxes[i].checked = checktoggle;
    }
  }
}
</script>

ở dạng HTML, đặt các nút bên dưới

<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>

<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>

Bạn có thể sử dụng mã đơn giản này

$('.checkall').click(function(){
    var checked = $(this).prop('checked');
    $('.checkme').prop('checked', checked);
});

để làm cho nó trong phiên bản ngắn hạn bằng cách sử dụng jQuery

Hộp kiểm chọn tất cả

<input type="checkbox" id="chkSelectAll">

Các hộp kiểm trẻ em

<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">

jQuery

$("#chkSelectAll").on('click', function(){
     this.checked ? $(".chkDel").prop("checked",true) : $(".chkDel").prop("checked",false);  
})

Có thể hơi muộn, nhưng khi xử lý một hộp kiểm tất cả, tôi tin rằng bạn cũng nên xử lý tình huống khi bạn kiểm tra tất cả các hộp kiểm, rồi bỏ chọn một trong các hộp kiểm bên dưới.

Trong trường hợp đó, nó sẽ tự động bỏ chọn hộp kiểm kiểm tra tất cả.

Ngoài ra khi kiểm tra thủ công tất cả các hộp kiểm, bạn nên kết thúc với hộp kiểm tất cả các hộp kiểm được tự động kiểm tra.

Bạn cần hai trình xử lý sự kiện, một cho hộp kiểm tất cả và một cho khi nhấp vào bất kỳ hộp nào bên dưới.

// HANDLES THE INDIVIDUAL CHECKBOX CLICKS
function client_onclick() {
    var selectAllChecked = $("#chk-clients-all").prop("checked");

    // IF CHECK ALL IS CHECKED, AND YOU'RE UNCHECKING AN INDIVIDUAL BOX, JUST UNCHECK THE CHECK ALL CHECKBOX.
    if (selectAllChecked && $(this).prop("checked") == false) {
        $("#chk-clients-all").prop("checked", false);
    } else { // OTHERWISE WE NEED TO LOOP THROUGH INDIVIDUAL CHECKBOXES AND SEE IF THEY ARE ALL CHECKED, THEN CHECK THE SELECT ALL CHECKBOX ACCORDINGLY.
        var allChecked = true;
        $(".client").each(function () {
            allChecked = $(this).prop("checked");
            if (!allChecked) {
                return false;
            }
        });
        $("#chk-clients-all").prop("checked", allChecked);
    }
}

// HANDLES THE TOP CHECK ALL CHECKBOX
function client_all_onclick() {
    $(".client").prop("checked", $(this).prop("checked"));
}

Ngắn gọn và đúng trọng tâm:

jQuery - Khi nhấp vào nút hoặc div hoặc thành phần nhãn. Kiểm tra tất cả các hộp kiểm trên trang. Hãy nhớ rằng bạn sẽ phải điều chỉnh: hộp kiểm để làm cho nó cụ thể hơn.

jQuery("#My-Button").click(function() {

  jQuery(':checkbox').each(function() {
    if(this.checked == true) {
      this.checked = false;                        
    } else {
      this.checked = true;                        
    }      
  });

});