Hoe vink ik alle selectievakjes aan met jQuery?

Ik ben geen expert met jQuery, maar ik heb geprobeerd een klein script voor mijn toepassing te maken. Ik wil alle selectievakjes aanvinken, maar het werkt niet correct.

Eerst probeerde ik attrte gebruiken en daarna probeerde ik het met propmaar ik doe iets verkeerd.

Ik heb dit eerst geprobeerd:

$("#checkAll").change(function(){
  if (! $('input:checkbox').is('checked')) {
      $('input:checkbox').attr('checked','checked');
  } else {
      $('input:checkbox').removeAttr('checked');
  }       
});

Maar dit werkte niet.

Volgende: Dit werkte beter dan bovenstaande code

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

Beide voorbeelden werken niet.

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


Antwoord 1, autoriteit 100%

U moet .prop()gebruiken om de aangevinkte eigenschap in te stellen

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

Demo: Fiddle


Antwoord 2, autoriteit 16%

Gebruik gewoon de eigenschap checkedvan de checkAllen gebruik prop()in plaats van attr voor gecontroleerde eigenschap

Live-demo

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

Gebruik prop() in plaats van attr() voor eigenschappen zoals aangevinkt

Vanaf jQuery 1.6 retourneert de .attr()-methode undefined voor attributen
die niet zijn ingesteld. DOM-eigenschappen ophalen en wijzigen, zoals:
de aangevinkte, geselecteerde of uitgeschakelde staat van formulierelementen, gebruik de
.prop() methode

U heeft dezelfde ID voor selectievakjes en deze moet uniekzijn. U kunt beter een klasse gebruiken met de afhankelijke selectievakjes, zodat deze niet de selectievakjesbevatten die u niet wilt. Omdat $('input:checkbox')alle selectievakjes op de pagina zal selecteren. Als uw pagina wordt uitgebreid met nieuwe selectievakjes, worden deze ook geselecteerd/gedeselecteerd. Wat misschien niet het beoogde gedrag is.

Live-demo

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

Antwoord 3, autoriteit 14%

Hier vindt u een complete oplossing.

$(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 moet zijn:

Enkel selectievakje op aangevinkte drie selectievakjes zal worden geselecteerd en gedeselecteerd.

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

Ik hoop dat dit voor iemand net zo helpt als voor mij.

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


Antwoord 4, autoriteit 3%

Ik denk dat wanneer de gebruiker alle selectievakjes handmatig selecteert, checkall automatisch moet worden aangevinkt of dat de gebruiker een van hen uit alle geselecteerde selectievakjes haalt, dan moet checkall automatisch worden uitgeschakeld.
hier is mijn code..

$('#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

Antwoord 5, autoriteit 2%

Waarom probeer je dit niet eens (in de 2e regel waar ‘form#’ je de juiste selector van je html-formulier moet plaatsen):

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

Uw html zou er zo uit moeten zien:

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

Ik hoop dat dat helpt.


Antwoord 6, autoriteit 2%

$(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);
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<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>

Antwoord 7

Eenvoudigste manier die ik ken:

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


Antwoord 8

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

Antwoord 9

één selectievakje om ze allemaal te regeren

Voor mensen op zoek naar plug-in om selectievakjes te bedienen via één die lichtgewicht is, heeft u out-of-the-box-ondersteuning voor Uniformjs en isheck en wordt niet gecontroleerd wanneer ten minste één van de gecontroleerde selectievakjes is uitgeschakeld (en wordt gecontroleerd wanneer alle gecontroleerde selectievakjes worden gecontroleerd zijn gecontroleerd natuurlijk) Ik heb een jQuery checkall plugin gemaakt.

Voel je vrij om de voorbeelden te controleren op documentatiepagina .


Voor dit vraagvoorbeeld, alles wat u hoeft te doen is:

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

is niet zo duidelijk en eenvoudig?


Antwoord 10

   <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

en jQuery

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

Antwoord 11

U kunt .prop()over de resultaten van een jQuery-selector direct, zelfs als het meer dan één resultaat retourneert. Dus:

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


Antwoord 12

Meestal wilt u ook dat het master-selectievakje niet wordt aangevinkt als het selectievakje van minimaal 1 slave is uitgeschakeld en om te worden gecontroleerd als alle slave-selectievakjes worden gecontroleerd:

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

En als u een besturingselement wilt inschakelen (bijv. de knop Remove Allof een knop Add Something), wanneer ten minste één selectievakje is aangevinkt en uitschakelen wanneer er geen selectievakje is aangevinkt:

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

Antwoord 13

HTML

<HTML>
<HEAD>
    <script type="text/javascript" src="https://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-code

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

Bekijk demo

Klik hier om Demo te bekijken


Antwoord 14

Gebruik .PROP () om de waarde van een woning

te krijgen

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

Antwoord 15

Ik weet dat er hier veel antwoord is, maar ik zou dit willen plaatsen voor optimalisatie van de code en we kunnen het wereldwijd gebruiken.

Ik heb mijn beste geprobeerd

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

Ik hoop dat dit zal helpen!


Antwoord 16

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

Antwoord 17

Checkall is de ID van Allcheck Box en CB-CHILD is de naam van elke selectievakjes die worden gecontroleerd en niet aangevinkt, afhankelijk van de cheque-klik-gebeurtenis

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

Antwoord 18

* Java-script om alle check-box *

te selecteren

Beste oplossing .. Probeer het

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

Antwoord 19

Mijn oplossing

$(function() {
    $(".checkAll").click(function(){
        checkwhat  = $(this).data("checkwhat");
        $('input:checkbox.'+checkwhat).not(this).prop('checked', this.checked);
    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<lablel><input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect">check all group 1</lablel>
<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="1">  value 1.1<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="2"> value 1.2<br>
<input class="chkSelect" type="checkbox" name="chkSelect[]" value="3">  value 1.2<br>
<br>
<br>
<lablel><input type="checkbox" name="chkSelectAll" class="checkAll" data-checkwhat="chkSelect2">check all group 1</lablel>
<br>
<input class="chkSelect2" type="checkbox" name="chkSelect[]" value="1"> value 2.1<br>
<input class="chkSelect2" type="checkbox" name="chkSelect[]" value="4">value 2.1<br>

Antwoord 20

U kunt onderstaande eenvoudige code gebruiken:

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

Voorbeeld voor gebruik:

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

Antwoord 21

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

verander de bovenstaande regel in

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

in het antwoord van SSR en het werkt perfect Bedankt


Antwoord 22

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

Antwoord 23

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

Antwoord 24

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

Antwoord 25

           <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="https://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>

Antwoord 26

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

Antwoord 27

Trigger-klik

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

OF

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

OF

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

Other episodes