จะตรวจสอบช่องทำเครื่องหมายทั้งหมดโดยใช้ jQuery ได้อย่างไร

ฉันไม่เชี่ยวชาญกับ jQuery แต่ฉันพยายามสร้างสคริปต์เล็ก ๆ น้อย ๆ สำหรับแอปพลิเคชันของฉัน ฉันต้องการทำเครื่องหมายในช่องทำเครื่องหมายทั้งหมด แต่ทำงานไม่ถูกต้อง

ก่อนอื่นฉันลองใช้attrและหลังจากนั้นฉันก็ลองใช้propแต่ฉันทำอะไรผิดพลาด

ฉันลองสิ่งนี้ก่อน:

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }       
});

แต่ไม่ได้ผล

ถัดไป: ทำงานได้ดีกว่าโค้ดด้านบน

$("#checkAll").change(function(){

  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').prop('checked',true);
  } else {
      $('input:checkbox').prop('checked', false);
  }       
});

ทั้งสองตัวอย่างไม่ทำงาน

JSFiddle: http://jsfiddle.net/hhZfu/4/

คุณต้องใช้. prop ()เพื่อตั้งค่าคุณสมบัติที่ตรวจสอบ

$("#checkAll").click(function(){
    $('input:checkbox').not(this).prop('checked', this.checked);
});

การสาธิต: Fiddle

เพียงใช้checkedคุณสมบัติของcheckAllและใช้prop ()แทน attr สำหรับคุณสมบัติที่ตรวจสอบ

การสาธิตสด

 $('#checkAll').click(function () {    
     $('input:checkbox').prop('checked', this.checked);    
 });

ใช้ prop () แทน attr () สำหรับคุณสมบัติเช่นการตรวจสอบ

ในขณะที่ jQuery 1.6 เมธอด .attr () จะส่งกลับไม่ได้กำหนดไว้สำหรับแอ็ตทริบิวต์ที่ยังไม่ได้ตั้งค่า ในการดึงและเปลี่ยนคุณสมบัติ DOM เช่นสถานะที่ถูกเลือกเลือกหรือปิดใช้งานขององค์ประกอบฟอร์มให้ใช้เมธอด. prop ()

คุณมีรหัสเดียวกันสำหรับช่องทำเครื่องหมายและควรจะไม่ซ้ำกัน คุณควรใช้คลาสบางคลาสที่มีช่องทำเครื่องหมายขึ้นอยู่กับเพื่อไม่ให้มีช่องทำเครื่องหมายที่คุณไม่ต้องการ เช่น $('input:checkbox')จะเลือกช่องทำเครื่องหมายทั้งหมดบนหน้า หากเพจของคุณถูกขยายพร้อมกับช่องทำเครื่องหมายใหม่พวกเขาจะถูกเลือก / ยกเลิกการเลือกด้วย ซึ่งอาจไม่ใช่พฤติกรรมที่ตั้งใจไว้

การสาธิตสด

$('#checkAll').click(function () {    
    $(':checkbox.checkItem').prop('checked', this.checked);    
});

โซลูชันที่สมบูรณ์อยู่ที่นี่

$(document).ready(function() {
    $("#checkedAll").change(function() {
        if (this.checked) {
            $(".checkSingle").each(function() {
                this.checked=true;
            });
        } else {
            $(".checkSingle").each(function() {
                this.checked=false;
            });
        }
    });

    $(".checkSingle").click(function () {
        if ($(this).is(":checked")) {
            var isAllChecked = 0;

            $(".checkSingle").each(function() {
                if (!this.checked)
                    isAllChecked = 1;
            });

            if (isAllChecked == 0) {
                $("#checkedAll").prop("checked", true);
            }     
        }
        else {
            $("#checkedAll").prop("checked", false);
        }
    });
});

Html ควรเป็น:

กล่องกาเครื่องหมายเดียวบนช่องทำเครื่องหมายสามช่องจะถูกเลือกและยกเลิกการเลือก

<input type="checkbox" name="checkedAll" id="checkedAll" />

<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />
<input type="checkbox" name="checkAll" class="checkSingle" />

หวังว่านี่จะช่วยใครบางคนเหมือนที่เคยทำกับฉัน

JS Fiddle https://jsfiddle.net/52uny55w/

ฉันคิดว่าเมื่อผู้ใช้เลือกช่องทำเครื่องหมายทั้งหมดด้วยตนเองควรเลือกช่องทำเครื่องหมายโดยอัตโนมัติหรือผู้ใช้ยกเลิกการเลือกช่องใดช่องหนึ่งจากช่องทำเครื่องหมายที่เลือกทั้งหมดจากนั้นช่องทำเครื่องหมายควรจะถูกยกเลิกโดยอัตโนมัติ นี่คือรหัสของฉัน ..

$('#checkall').change(function () {
    $('.cb-element').prop('checked',this.checked);
});

$('.cb-element').change(function () {
 if ($('.cb-element:checked').length == $('.cb-element').length){
  $('#checkall').prop('checked',true);
 }
 else {
  $('#checkall').prop('checked',false);
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="checkbox" name="all" id="checkall" />Check All</br>
<input type="checkbox" class="cb-element" /> Checkbox  1</br>
<input type="checkbox" class="cb-element" /> Checkbox  2</br>
<input type="checkbox" class="cb-element" /> Checkbox  3

ทำไมคุณไม่ลองทำดู (ในบรรทัดที่ 2 โดยที่ 'form #' คุณต้องใส่ตัวเลือกที่เหมาะสมของแบบฟอร์ม html ของคุณ):

$('.checkAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',true);
   })               
});

$('.uncheckAll').click(function(){
    $('form#myForm input:checkbox').each(function(){
        $(this).prop('checked',false);
   })               
});

html ของคุณควรเป็นดังนี้:

<form id="myForm">
      <span class="checkAll">checkAll</span>
      <span class="uncheckAll">uncheckAll</span>
      <input type="checkbox" class="checkSingle"></input>
      ....
</form>

ฉันหวังว่าจะช่วยได้

HTML:

<p><input type="checkbox" id="parent" /> Check/Uncheck All</p>
<ul>
  <li>
    <input type="checkbox" class="child" /> Checkbox 1</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 2</li>
  <li>
    <input type="checkbox" class="child" /> Checkbox 3</li>
</ul>

jQuery:

$(document).ready(function() {
  $("#parent").click(function() {
    $(".child").prop("checked", this.checked);
  });

  $('.child').click(function() {
    if ($('.child:checked').length == $('.child').length) {
      $('#parent').prop('checked', true);
    } else {
      $('#parent').prop('checked', false);
    }
  });
});

การสาธิต: FIDDLE

วิธีที่ง่ายที่สุดที่ฉันรู้:

$('input[type="checkbox"]').prop("checked", true);

$('#checkAll').on('change', function(){
    if($(this).attr('checked')){
        $('input[type=checkbox]').attr('checked',true);
    }
    else{
        $('input[type=checkbox]').removeAttr('checked');
    }
});

ช่องทำเครื่องหมายเดียวเพื่อปกครองทั้งหมด

สำหรับผู้ที่ยังคงมองหาปลั๊กอินเพื่อควบคุมช่องทำเครื่องหมายผ่านอันที่มีน้ำหนักเบามีการรองรับ UniformJS และ iCheck แบบสำเร็จรูปและไม่ถูกเลือกเมื่อไม่เลือกช่องทำเครื่องหมายที่มีการควบคุมอย่างน้อยหนึ่งช่อง (และจะได้รับการตรวจสอบเมื่อมีการเลือกช่องทำเครื่องหมายที่ควบคุมทั้งหมด แน่นอน) ฉันได้สร้างปลั๊กอิน jQuery checkAllแล้ว

รู้สึกอิสระที่จะตรวจสอบตัวอย่างในหน้าเอกสาร

สำหรับตัวอย่างคำถามนี้สิ่งที่คุณต้องทำคือ:

$( "#checkAll" ).checkall({
    target: "input:checkbox"
});

ไม่ชัดเจนและเรียบง่าย?

    <p id="checkAll">Check All</p>
<hr />
<input type="checkbox" class="checkItem">Item 1
<input type="checkbox" class="checkItem">Item 2
<input type="checkbox" class="checkItem">Item3

และ jquery

$(document).on('click','#checkAll',function () {
     $('.checkItem').not(this).prop('checked', this.checked);
 });

คุณสามารถเรียกใช้.prop()ผลลัพธ์ของ jQuery Selector ได้โดยตรงแม้ว่าจะส่งคืนผลลัพธ์มากกว่าหนึ่งรายการ ดังนั้น:

$("input[type='checkbox']").prop('checked', true)

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

/**
 * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes
 * @param masterId is the id of master checkbox
 * @param slaveName is the name of slave checkboxes
 */
function checkAll(masterId, slaveName) {
    $master = $('#' + masterId);
    $slave = $('input:checkbox[name=' + slaveName + ']');

    $master.click(function(){
        $slave.prop('checked', $(this).prop('checked'));
        $slave.trigger('change');
    });

    $slave.change(function() {
        if ($master.is(':checked') && $slave.not(':checked').length > 0) {
            $master.prop('checked', false);
        } else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
        $master.prop('checked', 'checked');
    }
    });
}

และหากคุณต้องการเปิดใช้งานการควบคุมใด ๆ (เช่นRemove Allปุ่มหรือAdd Somethingปุ่ม) เมื่อมีการเลือกช่องทำเครื่องหมายอย่างน้อยหนึ่งช่องและปิดใช้งานเมื่อไม่มีการเลือกช่องทำเครื่องหมาย:

/**
 * Checks and unchecks checkbox-group with a master checkbox and slave checkboxes,
 * enables or disables a control when a checkbox is checked
 * @param masterId is the id of master checkbox
 * @param slaveName is the name of slave checkboxes
 */
function checkAllAndSwitchControl(masterId, slaveName, controlId) {
    $master = $('#' + masterId);
    $slave = $('input:checkbox[name=' + slaveName + ']');

    $master.click(function(){
        $slave.prop('checked', $(this).prop('checked'));
        $slave.trigger('change');
    });

    $slave.change(function() {
        switchControl(controlId, $slave.filter(':checked').length > 0);
        if ($master.is(':checked') && $slave.not(':checked').length > 0) {
            $master.prop('checked', false);
        } else if ($master.not(':checked') && $slave.not(':checked').length == 0) {
        $master.prop('checked', 'checked');
    }
    });
}

/**
 * Enables or disables a control
 * @param controlId is the control-id
 * @param enable is true, if control must be enabled, or false if not
 */
function switchControl(controlId, enable) {
    var $control = $('#' + controlId);
    if (enable) {
        $control.removeProp('disabled');
    } else {
        $control.prop('disabled', 'disabled');
    }
}

HTML

<HTML>
<HEAD>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
    <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
    <th><input type="checkbox" id="selectall"/></th>
    <th>Cell phone</th>
    <th>Rating</th>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
    <td>BlackBerry Bold 9650</td>
    <td>2/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
    <td>Samsung Galaxy</td>
    <td>3.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
    <td>Droid X</td>
    <td>4.5/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
    <td>HTC Desire</td>
    <td>3/5</td>
</tr>
<tr>
    <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
    <td>Apple iPhone 4</td>
    <td>5/5</td>
</tr>
</table>

</BODY>
</HTML>

รหัส jQuery

<SCRIPT language="javascript">
$(function(){

    // add multiple select / deselect functionality
    $("#selectall").click(function () {
          $('.case').attr('checked', this.checked);
    });

    // if all checkbox are selected, check the selectall checkbox
    // and viceversa
    $(".case").click(function(){

        if($(".case").length == $(".case:checked").length) {
            $("#selectall").attr("checked", "checked");
        } else {
            $("#selectall").removeAttr("checked");
        }

    });
});
</SCRIPT>

ดูการสาธิต

คลิกที่นี่เพื่อดูการสาธิต

ใช้. prop ()เพื่อรับค่าของคุณสมบัติ

$("#checkAll").change(function () {
    $("input:checkbox").prop('checked', $(this).prop("checked"));
});

ฉันรู้ว่ามีคำตอบมากมายที่โพสต์ไว้ที่นี่ แต่ฉันต้องการโพสต์สิ่งนี้เพื่อการเพิ่มประสิทธิภาพของโค้ดและเราสามารถใช้งานได้ทั่วโลก

ฉันพยายามที่สุดแล้ว

/*----------------------------------------
 *  Check and uncheck checkbox which will global
 *  Params : chk_all_id=id of main checkbox which use for check all dependant, chk_child_pattern=start pattern of the remain checkboxes 
 *  Developer Guidline : For to implement this function Developer need to just add this line inside checkbox {{ class="check_all" dependant-prefix-id="PATTERN_WHATEVER_U_WANT" }}
 ----------------------------------------*/
function checkUncheckAll(chk_all_cls,chiled_patter_key){
    if($("."+chk_all_cls).prop('checked') == true){
        $('input:checkbox[id^="'+chiled_patter_key+'"]').prop('checked', 'checked');
    }else{
        $('input:checkbox[id^="'+chiled_patter_key+'"]').removeProp('checked', 'checked');
    }        
}

if($(".check_all").get(0)){
    var chiled_patter_key = $(".check_all").attr('dependant-prefix-id');

    $(".check_all").on('change',function(){        
        checkUncheckAll('check_all',chiled_patter_key);
    });

    /*------------------------------------------------------
     * this will remain checkbox checked if already checked before ajax call! :)
     ------------------------------------------------------*/
    $(document).ajaxComplete(function() {
        checkUncheckAll('check_all',chiled_patter_key);
    });
}

ฉันหวังว่านี่จะช่วยได้!

function checkAll(class_name) {
    $("." + class_name).each(function () { 
        if (this.checked == true) 
            this.checked = false; 
        else 
            this.checked = true; 
    }); 
}

checkall คือ id ของ allcheck box และ cb-child คือชื่อของแต่ละช่องทำเครื่องหมายที่จะถูกเลือกและไม่เลือกขึ้นอยู่กับเหตุการณ์การคลิก checkall

$("#checkall").click(function () {
                        if(this.checked){
                            $("input[name='cb-child']").each(function (i, el) {
                                el.setAttribute("checked", "checked");
                                el.checked = true;
                                el.parentElement.className = "checked";

                            });
                        }else{
                            $("input[name='cb-child']").each(function (i, el) {
                                el.removeAttribute("checked");
                                el.parentElement.className = "";
                            });
                        }
                    });

* JAVA SCRIPT เพื่อเลือกกล่องตรวจสอบทั้งหมด *

Best Solution.. ลองดู

<script type="text/javascript">
        function SelectAll(Id) {
            //get reference of GridView control
            var Grid = document.getElementById("<%= GridView1.ClientID %>");
            //variable to contain the cell of the Grid
            var cell;

            if (Grid.rows.length > 0) {
                //loop starts from 1. rows[0] points to the header.
                for (i = 1; i < grid.rows.length; i++) {
                    //get the reference of first column
                    cell = grid.rows[i].cells[0];

                    //loop according to the number of childNodes in the cell
                    for (j = 0; j < cell.childNodes.length; j++) {
                        //if childNode type is CheckBox                 
                        if (cell.childNodes[j].type == "checkbox") {
                            //Assign the Status of the Select All checkbox to the cell checkbox within the Grid
                            cell.childNodes[j].checked = document.getElementById(Id).checked;
                        }
                    }
                }
            }
        }
    </script>

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

function checkDelBoxes(pForm, boxName, parent)
{
    for (i = 0; i < pForm.elements.length; i++)
        if (pForm.elements[i].name == boxName)
            pForm.elements[i].checked = parent;
}

ตัวอย่างการใช้:

<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', true);return false;"> Select All
</a>
<a href="javascript:;" onclick="javascript:checkDelBoxes($(this).closest('form').get(0), 'CheckBox[]', false);return false;"> Unselect All
</a>

if(isAllChecked == 0)
{ 
    $("#select_all").prop("checked", true); 
}   

โปรดเปลี่ยนบรรทัดด้านบนเป็น

if(isAllChecked == 0)
{ 
    $("#checkedAll").prop("checked", true); 
}   

ในคำตอบของ SSR และการทำงานที่สมบูรณ์แบบขอบคุณ

if($('#chk_all').is(":checked"))
 {
    $('#'+id).attr('checked', true);
 }
else
 {
    $('#'+id).attr('checked', false);
 }  

 $('#checkall').on("click",function(){
      $('.chk').trigger("click");
   });

html:

    <div class="col-md-3 general-sidebar" id="CategoryGrid">
                                                    <h5>Category &amp; Sub Category <span style="color: red;">* </span></h5>
                                                    <div class="checkbox">
                                                        <label>
                                                            <input onclick="checkUncheckAll(this)" type="checkbox">
                                                            All
                                                        </label>
                                                    </div>
                                                <div class="checkbox"><label><input class="cat" type="checkbox" value="Quality">Quality</label></div>
<div class="checkbox"><label><input class="subcat" type="checkbox" value="Planning process and execution">Planning process and execution</label></div>

javascript:

function checkUncheckAll(ele) {
    if (ele.checked) {
        $('.cat').prop('checked', ele.checked);
        $('.subcat').prop('checked', ele.checked);
    }
    else {
        $('.cat').prop('checked', ele.checked);
        $('.subcat').prop('checked', ele.checked);
    }
}

            <pre>
            <SCRIPT language="javascript">
            $(function(){
                // add multiple select / deselect functionality
                $("#selectall").click(function () {
                      $('.case').attr('checked', this.checked);
                });

                // if all checkbox are selected, check the selectall checkbox
                // and viceversa
                $(".case").click(function(){

                    if($(".case").length == $(".case:checked").length) {
                        $("#selectall").attr("checked", "checked");
                    } else {
                        $("#selectall").removeAttr("checked");
                    }

                });
            });
            </SCRIPT>
            <HTML>
            <HEAD>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
            <TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
            </HEAD>
            <BODY>
            <H2>Multiple Checkbox Select/Deselect - DEMO</H2>
            <table border="1">
              <tr>
                <th><input type="checkbox" id="selectall"/></th>
                <th>Cell phone</th>
                <th>Rating</th>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
                <td>BlackBerry Bold 9650</td>
                <td>2/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
                <td>Samsung Galaxy</td>
                <td>3.5/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
                <td>Droid X</td>
                <td>4.5/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
                <td>HTC Desire</td>
                <td>3/5</td>
              </tr>
              <tr>
                <td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
                <td>Apple iPhone 4</td>
                <td>5/5</td>
              </tr>
            </table>
            </BODY>
            </HTML>
            </pre>

function chek_al_indi(id)
{
    var k = id;
    var cnt_descriptiv_indictr = eval($('#cnt_descriptiv_indictr').val());
    var std_cnt = 10;

    if ($('#'+ k).is(":checked"))
    {
        for (var i = 1; i <= std_cnt; i++)  
        {
            $("#chk"+ k).attr('checked',true);  
            k = k + cnt_descriptiv_indictr;
        }
    }

    if ($('#'+ k).is(":not(:checked)"))
    {
        for (var i = 1; i <= std_cnt; i++)  
        {
            $("#chk"+ k).attr('checked',false);     
            k = k + cnt_descriptiv_indictr;
        }       
    }
}

คลิกทริกเกอร์

$("#checkAll").click(function(){
    $('input:checkbox').click();
});

หรือ

$("#checkAll").click(function(){
    $('input:checkbox').trigger('click');
});

หรือ

$("#checkAll").click(function(){
    $('input:checkbox').prop('checked', this.checked);
});