วิธีการใช้งานช่องทำเครื่องหมาย "เลือกทั้งหมด" ใน HTML?

ฉันมีหน้า HTML พร้อมช่องทำเครื่องหมายหลายช่อง

ฉันต้องการช่องทำเครื่องหมายอีกหนึ่งช่องโดยใช้ชื่อ "เลือกทั้งหมด" เมื่อฉันเลือกช่องทำเครื่องหมายนี้ช่องทำเครื่องหมายทั้งหมดในหน้า HTML จะต้องเลือก ฉันจะทำสิ่งนี้ได้อย่างไร

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

UPDATE:

for each...inสร้างไม่ได้ดูเหมือนจะทำงานอย่างน้อยในกรณีนี้ใน Safari 5 หรือ Chrome 5. รหัสนี้ควรจะทำงานในเบราว์เซอร์ทั้งหมด:

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

ใช้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" />

ฉันไม่แน่ใจว่าไม่มีใครตอบด้วยวิธีนี้ (ใช้jQuery ):

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

มันสะอาดไม่มีลูปหรือถ้า / ประโยคอื่นและทำงานเป็นเสน่ห์

หากต้องการยกเลิกการเลือก:

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

document.querySelectorAll()ฉันประหลาดใจที่ไม่มีใครกล่าวถึง โซลูชัน Pure JavaScript ใช้งานได้ใน 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 />

สาธิต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>

รุ่นที่มีการเปลี่ยนแปลงเล็กน้อยซึ่งตรวจสอบและไม่เลือกอย่างเคารพ

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

เมื่อคุณโทรdocument.getElementsByName("name"), Objectคุณจะได้รับ ใช้.item(index)เพื่อสำรวจรายการทั้งหมดของObject

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>

โซลูชันที่เรียบง่ายของฉันอนุญาตให้เลือก / ยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดในส่วนที่กำหนดของรูปแบบในขณะที่ใช้ชื่อที่แตกต่างกันสำหรับแต่ละช่องทำเครื่องหมายเพื่อให้พวกเขาสามารถจดจำได้ง่ายหลังจากฟอร์ม POSTed

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

ตัวอย่าง 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>

ฉันหวังว่าคุณจะชอบมัน!

ลอง JQuery ง่าย ๆ นี้:

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

JavaScript เป็นทางออกที่ดีที่สุดของคุณ ลิงค์ด้านล่างแสดงตัวอย่างการใช้ปุ่มเพื่อยกเลิก / เลือกทั้งหมด คุณสามารถลองปรับใช้มันเพื่อใช้กล่องกาเครื่องหมายเพียงใช้คุณ 'เลือกทั้งหมด' กล่องกาเครื่องหมาย 'แอตทริบิวต์ onClick

ฟังก์ชัน Javascript เพื่อตรวจสอบหรือยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมด

หน้านี้มีตัวอย่างที่ง่ายกว่า

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

ตัวอย่างนี้ทำงานร่วมกับ JavaScript ดั้งเดิมที่ชื่อตัวแปรช่องทำเครื่องหมายแตกต่างกันไปนั่นคือไม่ใช่ "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>

ที่ควรทำงานเสร็จ:

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

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

ใช้ jQuery และสิ่งที่น่าพิศวง:

ด้วยช่องทำเครื่องหมายหลักที่มีผลผูกพันนี้จะยังคงซิงค์กับช่องทำเครื่องหมายที่อยู่ภายใต้มันจะไม่ถูกทำเครื่องหมายเว้นแต่ว่าช่องทำเครื่องหมายทั้งหมดถูกเลือก

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

ใน 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"/>

คุณอาจจะมีชุดที่แตกต่างของช่องทำเครื่องหมายในรูปแบบเดียวกัน นี่คือโซลูชันที่เลือก / ไม่เลือกช่องทำเครื่องหมายตามชื่อคลาสโดยใช้ฟังก์ชัน vanilla javascript document.getElementsByClassName

ปุ่มเลือกทั้งหมด

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

ช่องทำเครื่องหมายบางส่วนเพื่อเลือก

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

จาวาสคริปต์

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

นี่คือสิ่งที่จะทำเช่นถ้าคุณมี 5 ช่องทำเครื่องหมายและคุณคลิกตรวจสอบทั้งหมดจะตรวจสอบทั้งหมดตอนนี้ถ้าคุณยกเลิกการทำเครื่องหมายในช่องทำเครื่องหมายทั้งหมดโดยคลิกที่ช่องทำเครื่องหมายแต่ละ 5 เมื่อคุณยกเลิกการเลือกช่องทำเครื่องหมายสุดท้ายเลือก ช่องทำเครื่องหมายทั้งหมดยังได้รับการตรวจสอบ

$("#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)
      }
  })

ในขณะที่ฉันไม่สามารถแสดงความคิดเห็นได้ที่นี่เป็นคำตอบ: ฉันจะเขียนวิธีแก้ปัญหาของ Can Berk Güderด้วยวิธีทั่วไปมากกว่าดังนั้นคุณอาจใช้ฟังก์ชันนี้ซ้ำสำหรับช่องทำเครื่องหมายอื่น

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

หากใช้คำตอบสูงสุดสำหรับ jquery โปรดจำไว้ว่าวัตถุที่ส่งผ่านไปยังฟังก์ชันคลิกคือ EventHandler ไม่ใช่วัตถุกล่องกาเครื่องหมายเดิม ดังนั้นโค้ด shoudl จึงถูกแก้ไขดังนี้

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

จาวาสคริ

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

นี่คือการใช้งาน 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

จาวาสคริปต์

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

1: เพิ่มตัวจัดการเหตุการณ์onchange

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

2: ปรับเปลี่ยนรหัสเพื่อจัดการตรวจสอบ / ไม่ถูกตรวจสอบ

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

วิธีการด้านล่างนั้นง่ายต่อการเข้าใจและคุณสามารถใช้แบบฟอร์มที่มีอยู่ในไม่กี่นาที

ด้วย Jquery

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

ในรูปแบบ HTML วางปุ่มด้านล่าง

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

เพียงแค่ใช้ 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>

ในรูปแบบ HTML วางปุ่มด้านล่าง

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

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

คุณสามารถใช้รหัสง่าย ๆ นี้ได้

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

เพื่อทำให้เป็นเวอร์ชันสั้นโดยใช้ jQuery

เลือกช่องทำเครื่องหมายทั้งหมด

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

ช่องทำเครื่องหมายเด็ก

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

อาจจะช้าไปหน่อย แต่เมื่อต้องจัดการกับช่องทำเครื่องหมายทั้งหมดฉันเชื่อว่าคุณควรจัดการกับสถานการณ์เมื่อคุณทำเครื่องหมายในช่องทำเครื่องหมายทั้งหมดที่ตรวจสอบแล้วยกเลิกการทำเครื่องหมายที่ช่องใดช่องหนึ่งด้านล่าง

ในกรณีนั้นควรยกเลิกการเลือกช่องทำเครื่องหมายทั้งหมดโดยอัตโนมัติ

นอกจากนี้เมื่อตรวจสอบช่องทั้งหมดด้วยตนเองคุณควรท้ายด้วยช่องทำเครื่องหมายทั้งหมดที่ถูกตรวจสอบโดยอัตโนมัติ

คุณต้องมีตัวจัดการเหตุการณ์สองตัวหนึ่งตัวสำหรับกล่องกาเครื่องหมายทั้งหมดและอีกตัวสำหรับเมื่อคลิกที่ช่องใดช่องหนึ่งด้านล่าง

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

ง่ายและตรงประเด็น:

jQuery - เมื่อคลิกปุ่มหรือ div หรือองค์ประกอบป้ายกำกับ ทำเครื่องหมายที่ช่องทำเครื่องหมายทั้งหมดในหน้า โปรดทราบว่าคุณจะต้องปรับเปลี่ยน: ช่องทำเครื่องหมายเพื่อให้เฉพาะเจาะจงมากขึ้น

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

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

});