Schakel selectievakjes aan / uit

Ik heb het volgende:

$(document).ready(function()
{
    $("#select-all-teammembers").click(function() {
        $("input[name=recipients\\[\\]]").attr('checked', true);
    });                 
});

Ik wil graag de id="select-all-teammembers"wanneer erop klikte om te schakelen tussen gecontroleerd en uitgeschakeld. Ideeën? Dat zijn niet tientallen regels code?

Antwoord 1, Autoriteit 100%

U kunt schrijven:

$(document).ready(function() {
    $("#select-all-teammembers").click(function() {
        var checkBoxes = $("input[name=recipients\\[\\]]");
        checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    });                 
});

Vóór jQuery 1.6, wanneer we alleen attractie () en niet Prop () , WE SCHRIFTEN:

checkBoxes.attr("checked", !checkBoxes.attr("checked"));

Maar prop()heeft betere semantiek dan attr()wanneer deze wordt toegepast op “Boolean” HTML-kenmerken, dus het heeft meestal de voorkeur in deze situatie.

Antwoord 2, Autoriteit 29%

//this toggles the checkbox, and fires its event if it has    
$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click(); 

Antwoord 3, Autoriteit 9%

Ik weet dat dit oud is, maar de vraag was een beetje dubbelzinnig in die zin dat wisselenkan betekenen dat elk selectievakje zijn status moet wijzigen, wat dat ook is. Als je er 3 hebt aangevinkt en 2 niet hebt aangevinkt, dan zou door het wisselen de eerste 3 uitgevinkt zijn en de laatste 2 aangevinkt.

Daarvoor werkt geen van de oplossingen hier, omdat ze ervoor zorgen dat alle selectievakjes dezelfde status hebben, in plaats van de status van elk selectievakje te wijzigen. Door $(':checkbox').prop('checked')op veel selectievakjes te doen, wordt de logische AND geretourneerd tussen alle .checkedbinaire eigenschappen, dwz als een van hen niet is aangevinkt , de geretourneerde waarde is false.

U moet .each()gebruiken als u de status van elk selectievakje wilt wijzigen in plaats van ze allemaal gelijk te maken, bijvoorbeeld

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

Houd er rekening mee dat je $(this)niet nodig hebt in de handler, aangezien de eigenschap .checkedin alle browsers bestaat.

Antwoord 4, autoriteit 2%

Hier is een andere manier die je wilt.

$(document).ready(function(){   
    $('#checkp').toggle(
        function () { 
            $('.check').attr('Checked','Checked'); 
        },
        function () { 
            $('.check').removeAttr('Checked'); 
        }
    );
});

Antwoord 5, autoriteit 2%

Ik denk dat het eenvoudiger is om gewoon een klik te activeren:

$("#select-all-teammembers").click(function() {
    $("input[name=recipients\\[\\]]").trigger('click');
});                 

Antwoord 6

Gebruik deze plug-in:

$.fn.toggleCheck  =function() {
       if(this.tagName === 'INPUT') {
           $(this).prop('checked', !($(this).is(':checked')));
       }
   }

Dan

$('#myCheckBox').toggleCheck();

Antwoord 7

De beste manier die ik kan bedenken.

$('#selectAll').change(function () {
    $('.reportCheckbox').prop('checked', this.checked);
});

of

$checkBoxes = $(".checkBoxes");
$("#checkAll").change(function (e) {
    $checkBoxes.prop("checked", this.checked);
});   

of

<input onchange="toggleAll(this)">
function toggleAll(sender) {
    $(".checkBoxes").prop("checked", sender.checked);
}

Antwoord 8

Sinds jQuery 1.6 kunt u .prop(function)om de aangevinkte staat van elk gevonden element te wijzigen:

$("input[name=recipients\\[\\]]").prop('checked', function(_, checked) {
    return !checked;
});

Antwoord 9

Ervan uitgaande dat het een afbeelding is die het selectievakje moet inschakelen, werkt dit voor mij

<img src="something.gif" onclick="$('#checkboxid').prop('checked', !($('#checkboxid').is(':checked')));">
<input type="checkbox" id="checkboxid">

Antwoord 10

Als u elk vak afzonderlijk wilt schakelen (of werkt slechts één doos net zo goed):

Ik raad aan. ijk (), want het is gemakkelijk te wijzigen als u wilt dat er verschillende dingen gebeuren, en nog steeds relatief kort en gemakkelijk te lezen.

b.g. :

// toggle all checkboxes, not all at once but toggle each one for its own checked state:
$('input[type="checkbox"]').each(function(){ this.checked = ! this.checked });
// check al even boxes, uncheck all odd boxes:
$('input[type="checkbox"]').each(function(i,cb){ cb.checked = (i%2 == 0); });
// set all to checked = x and only trigger change if it actually changed:
x = true;
$('input[type="checkbox"]').each(function(){
    if(this.checked != x){ this.checked = x; $(this).change();}  
});

Aan een kant opmerking …
Weet je niet zeker waarom iedereen .attr () of .prop () om dingen te controleren.

Voor zover ik weet, heeft element.Checked altijd hetzelfde gewerkt in alle browsers?

Antwoord 11

check-all checkbox moet zelf worden bijgewerkt onder bepaalde voorwaarden. Probeer op ‘# select-all-teamleden’ te klikken, vervolgens enkele items uit en klik op Alles selecteren. Je kunt inconsistentie zien. Om te voorkomen dat het de volgende truc wordt gebruikt:

 var checkBoxes = $('input[name=recipients\\[\\]]');
  $('#select-all-teammembers').click(function() {
    checkBoxes.prop("checked", !checkBoxes.prop("checked"));
    $(this).prop("checked", checkBoxes.is(':checked'));
  }); 

BTW Alle checkboxes Dom-object moet in de cache worden opgeslagen zoals hierboven beschreven.

Antwoord 12

Hier is een jQuery-manier om selectievakjes in te schakelen zonder een selectievakje met HTML5 & AMP te selecteren; Labels:

<div class="checkbox-list margin-auto">
    <label class="">Compare to Last Year</label><br>
    <label class="normal" for="01">
       <input id="01" type="checkbox" name="VIEW" value="01"> Retail units
    </label>
    <label class="normal" for="02">
          <input id="02" type="checkbox" name="VIEW" value="02">  Retail Dollars
    </label>
    <label class="normal" for="03">
          <input id="03" type="checkbox" name="VIEW" value="03">  GP Dollars
    </label>
    <label class="normal" for="04">
          <input id="04" type="checkbox" name="VIEW" value="04">  GP Percent
    </label>
</div>
  $("input[name='VIEW']:checkbox").change(function() {
    if($(this).is(':checked')) {  
         $("input[name='VIEW']:checkbox").prop("checked", false);
     $("input[name='VIEW']:checkbox").parent('.normal').removeClass("checked");
         $(this).prop("checked", true);
         $(this).parent('.normal').addClass('checked');
    }
    else{
         $("input[name='VIEW']").prop("checked", false);
         $("input[name='VIEW']").parent('.normal').removeClass('checked');
    }    
});

http://www.bootply.com/A4h6kAPshx

Antwoord 13

u kunt dit gewoon gebruiken

$("#chkAll").on("click",function(){
    $("input[name=checkBoxName]").prop("checked",$(this).prop("checked"));
});

Antwoord 14

jQuery("#checker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = true;
    });
});
jQuery("#dechecker").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = false;
    });
});
jQuery("#checktoggler").click(function(){
    jQuery("#mydiv :checkbox").each(function(){
        this.checked = !this.checked;
    });
});

😉

Antwoord 15

Je kunt ook zo schrijven

$(function() {
    $("#checkbox-toggle").click(function() {
        $('input[type=checkbox][name=checkbox_id\\[\\]]').click();
    });
});

Je hoeft alleen maar de klikgebeurtenis van het selectievakje aan te roepen wanneer de gebruiker op de knop met id ‘#checkbox-toggle’ klikt.

Antwoord 16

Een betere aanpak en UX

$('.checkall').on('click', function() {
   var $checks  = $('checks');
   var $ckall = $(this);
    $.each($checks, function(){
        $(this).prop("checked", $ckall.prop('checked'));
    });
});
$('checks').on('click', function(e){
   $('.checkall').prop('checked', false);
});

Antwoord 17

<table class="table table-datatable table-bordered table-condensed table-striped table-hover table-responsive">
<thead>
    <tr>
        <th class="col-xs-1"><a class="select_all btn btn-xs btn-info"> Select All </a></th>
        <th class="col-xs-2">#ID</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="checkbox" name="order333"/></td>
        <td>{{ order.id }}</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="order334"/></td>
        <td>{{ order.id }}</td>
    </tr>
</tbody>                  
</table>

Probeer:

$(".table-datatable .select_all").on('click', function () {
    $("input[name^='order']").prop('checked', function (i, val) {
        return !val;
    });
});

Antwoord 18

Deze werkt erg goed voor mij.

  $("#checkall").click(function() {
       var fruits = $("input[name=fruits\\[\\]]");
        fruits.prop("checked", $(this).prop("checked"));
    });

Antwoord 19

Het meest eenvoudige voorbeeld zou zijn:

// get DOM elements
var checkbox = document.querySelector('input'),
    button = document.querySelector('button');
// bind "cilck" event on the button
button.addEventListener('click', toggleCheckbox);
// when clicking the button, toggle the checkbox
function toggleCheckbox(){
  checkbox.checked = !checkbox.checked;
};

<input type="checkbox">
<button>Toggle checkbox</button>

$(document).on('click', '.fieldWrapper > label', function(event) {
    event.preventDefault()
    var n = $( event.target ).parent().find('input:checked').length
    var m = $( event.target ).parent().find('input').length
    x = n==m? false:true
    $( event.target ).parent().find('input').each(function (ind, el) {
        // $(el).attr('checked', 'checked');
        this.checked = x
    })
})

// checkbox selection
var $chk=$(':checkbox');
$chk.prop('checked',$chk.is(':checked') ? null:'checked');

$('.onoffswitch-label').click(function () {
if ($('#checkboxID').prop('checked')) 
 {
   $('#checkboxID').prop('checked', false);
 }
else 
 {
   $('#checkboxID').prop('checked', true);
 }
});