So aktivieren/deaktivieren Sie alle Checkboxen mit jQuery mit einer einzigen Schaltfläche?

-1

Ich möchte mit einem einzigen Klick klicken, um alle Kontrollkästchen in einem bestimmten div/Tabelle markieren und deaktivieren Sie alle Kontrollkästchen. Außerdem wollte ich, dass der Link/oder Button den Namen auf 'Alle auswählen' ändert. & 'Alle abwählen'. Ich habe ähnliche Antworten mit Kontrollkästchen oder zwei verschiedenen Tastenklicks, aber nichts dafür gesehen. Ich würde es mit jquery einfach und kurz halten.So aktivieren/deaktivieren Sie alle Checkboxen mit jQuery mit einer einzigen Schaltfläche?

HTML

<body> 
 
<div id="main"> 
 
<div id="first"> 
 
<h1>Check & Uncheck All Options</h1> 
 
<p>Check & Uncheck All Options by Button</p> 
 
<input id="checkAll" type="button" value="Check/Uncheck All "> 
 
<div class="button"> 
 
<input class="first" id="Item 1" name="option1" type="checkbox"> 
 
<label class="label1" for="Item 1">Item 1</label> 
 
<input class="first" id="Item 2" name="option1" type="checkbox"> 
 
<label class="label1" for="Item 2">Item 2</label> 
 
<input class="first" id="Item 3" name="option1" type="checkbox"> 
 
<label class="label1" for="Item 3">Item 3</label> 
 
<input class="first" id="Item 4" name="option1" type="checkbox"> 
 
<label class="label1" for="Item 4">Item 4</label> 
 
</div> 
 
</body>

Quelle

2016-08-15 CowboyCoder

Wie wäre es wie folgt aus:

$(function() { 
 
    
 
    $(document).on('click', '#checkAll', function() { 
 
    
 
    if ($(this).val() == 'Check All') { 
 
     $('.button input').prop('checked', true); 
 
     $(this).val('Uncheck All'); 
 
    } else { 
 
     $('.button input').prop('checked', false); 
 
     $(this).val('Check All'); 
 
    } 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="main"> 
 
    <div id="first"> 
 
     <h1>Check & Uncheck All Options</h1> 
 
     <p>Check & Uncheck All Options by Button</p> 
 
     <input id="checkAll" type="button" value="Check All"> 
 
     <div class="button"> 
 
     <input class="first" id="Item 1" name="option1" type="checkbox"> 
 
     <label class="label1" for="Item 1">Item 1</label> 
 
     <input class="first" id="Item 2" name="option1" type="checkbox"> 
 
     <label class="label1" for="Item 2">Item 2</label> 
 
     <input class="first" id="Item 3" name="option1" type="checkbox"> 
 
     <label class="label1" for="Item 3">Item 3</label> 
 
     <input class="first" id="Item 4" name="option1" type="checkbox"> 
 
     <label class="label1" for="Item 4">Item 4</label> 
 
     </div> 
 
</body>

Quelle

2016-08-15 17:36:53 Cameron

Haben Sie eine Klasse, die den Zustand des Kontrollkästchen unterhält. Verwenden Sie das, um die Eigenschaft checked der Checkboxen umzuschalten.

var $checkboxes = $('.first'); 
var $selectAllCheckbox = $('#checkAll'); 

$selectAllCheckbox.on('click', function() { 

    var $this = $(this); 
    var allChecked = true; 

    if ($this.hasClass('checked-all')) { 
    $this.removeClass('checked-all'); 
    allChecked = false; 
    } else { 
    $this.addClass('checked-all'); 
    } 

    $checkboxes.prop('checked', allChecked); 
}); 

// Maintain the state if the checkbox is 
// checked individually 
$('.first').on('change', function() { 
    var isChecked = true; 
    $.each($checkboxes, function(i, checkbox) { 
     if(!$(checkbox).is(':checked')) { 
      isChecked = false; 
     } 
    }); 

    isChecked ? $selectAllCheckbox.addClass('checked-all') 
       : $selectAllCheckbox.removeClass('checked-all'); 
});

jSFiddle

Quelle

2016-08-15 17:33:22

diesen Code Versuchen:

$('#checkAll').click(function(){ 
    if($('input[name="option1"]:checked').length>0){//any one is checked 
     $('.button input').prop('checked', false); 
    } 
    else{ 
     $('.button input').prop('checked', true); 
    } 
    }) 


<body> 
    <div id="main"> 
    <div id="first"> 
     <h1>Check & Uncheck All Options</h1> 
     <p>Check & Uncheck All Options by Button</p> 
     <input id="checkAll" type="button" value="Check All"> 
     <div class="button"> 
     <input class="first" id="Item 1" name="option1" type="checkbox"> 
     <label class="label1" for="Item 1">Item 1</label> 
     <input class="first" id="Item 2" name="option1" type="checkbox"> 
     <label class="label1" for="Item 2">Item 2</label> 
     <input class="first" id="Item 3" name="option1" type="checkbox"> 
     <label class="label1" for="Item 3">Item 3</label> 
     <input class="first" id="Item 4" name="option1" type="checkbox"> 
     <label class="label1" for="Item 4">Item 4</label> 
     </div> 
</body>

Quelle

2016-08-15 17:51:38

<script> 
    jQuery(document).ready(function(e) 
    { 
     jQuery(".check_all").click(function() 
     { 
      jQuery(".all_checked").attr('checked', $(this).is(':checked') ? true : false); 
     }) 
    }); 
</script>

HTML

<input type="checkbox" class="check_all"/> 
<input type="checkbox" class="all_checked"/> 
<input type="checkbox" class="all_checked"/> 
<input type="checkbox" class="all_checked"/>

Quelle

2017-09-26 11:50:04

immer, gibt immer Erklärungen mit Ihren Antworten. Code-only-Posts sind von geringer Qualität, da sie sehr wenig zur Aufklärung der Leser beitragen. – mickmackusa

So aktivieren/deaktivieren Sie alle Checkboxen mit jQuery mit einer einzigen Schaltfläche?

Antwort

Verwandte Themen