jquery check Deaktivieren Sie alle Kontrollkästchen mit einer Schaltfläche

Ich versuche, aktivieren/deaktivieren Sie alle Checkboxen mit jquery. Nun durch aktivieren/deaktivieren der übergeordneten checkbox alle untergeordneten Checkboxen sind immer selektierte/deselektierte auch mit dem text des parent immer verändert, checkall/uncheckall.

Will ich jetzt ersetzen parent mit einem input-Taste, und ändern Sie den text auch auf die Taste checkall/uncheckall. Dieser code kann bitte jemand den code optimieren....

    $( function() {
        $( '.checkAll' ).live( 'change', function() {
            $( '.cb-element' ).attr( 'checked', $( this ).is( ':checked' ) ? 'checked' : '' );
            $( this ).next().text( $( this ).is( ':checked' ) ? 'Uncheck All' : 'Check All' );
        });
        $( '.cb-element' ).live( 'change', function() {
            $( '.cb-element' ).length == $( '.cb-element:checked' ).length ? $( '.checkAll' ).attr( 'checked', 'checked' ).next().text( 'Uncheck All' ) : $( '.checkAll' ).attr( 'checked', '' ).next().text( 'Check All' );

        });
    });


   <input type="checkbox" class="checkAll" /> <b>Check All</b>

   <input type="checkbox" class="cb-element" /> Checkbox  1
   <input type="checkbox" class="cb-element" /> Checkbox  2
   <input type="checkbox" class="cb-element" /> Checkbox  3

InformationsquelleAutor der Frage Ravi | 2011-03-08

200

Versuchen, diese :

$(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked','checked');
        $(this).val('uncheck all');
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');        
    })
})

DEMO

InformationsquelleAutor der Antwort Prakash

Versuchen, Diese:

HTML

<input type="checkbox" name="all" id="checkall" />

JavaScript

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

DEMO

InformationsquelleAutor der Antwort Rodgers

Html

<input type="checkbox" name="select_all" id="select_all" class="checkAll" />

Javascript

    $('.checkAll').click(function(){
    if($(this).attr('checked')){
        $('input:checkbox').attr('checked',true);
    }
    else{
        $('input:checkbox').attr('checked',false);
    }
});

InformationsquelleAutor der Antwort Crisalin Petrovschi

Lösung für das aktivieren der Checkboxen über einen button, kompatibel mit jQuery 1.9+ wo Toggle-event ist nicht mehr verfügbar:

$('.check:button').click(function(){
      var checked = !$(this).data('checked');
      $('input:checkbox').prop('checked', checked);
      $(this).val(checked ? 'uncheck all' : 'check all' )
      $(this).data('checked', checked);
});

DEMO

InformationsquelleAutor der Antwort Michal R

4

Versuchen Sie dies:
```
$('.checkAll').on('click', function(e) {
     $('.cb-element').prop('checked', $(e.target).prop('checked'));
});
```
e ist das Ereignis, das generiert wird, wenn Sie tun clickund e.target ist das element geklickt wird (.checkAll),
so müssen Sie nur setzen Sie die Eigenschaft checked der Elemente mit der Klasse .cb-element wie die von element
mit Klasse .checkAll`.

PS: Entschuldigen Sie mein schlechtes Englisch!

InformationsquelleAutor der Antwort Ruben Perez

Beste Lösung hier
Überprüfen Fiddle

$("#checkAll").change(function () {
    $("input:checkbox.cb-element").prop('checked', $(this).prop("checked"));
});
$(".cb-element").change(function () {
        _tot = $(".cb-element").length                        
        _tot_checked = $(".cb-element:checked").length;

        if(_tot != _tot_checked){
            $("#checkAll").prop('checked',false);
        }
});

<input type="checkbox" id="checkAll"/> ALL

<br />

<input type="checkbox" class="cb-element" /> Checkbox  1
<input type="checkbox" class="cb-element" /> Checkbox  2
<input type="checkbox" class="cb-element" /> Checkbox  3

InformationsquelleAutor der Antwort Rupak Das

versuchen, diese

$(".checkAll").click(function() {
    if("checkall" === $(this).val()) {
         $(".cb-element").attr('checked', true);
         $(this).val("uncheckall"); //change button text
    }
    else if("uncheckall" === $(this).val()) {
         $(".cb-element").attr('checked', false);
         $(this).val("checkall"); //change button text
    }
});

InformationsquelleAutor der Antwort naiquevin

Shameless self-promotion: es gibt ein jQuery-plugin für die.

HTML:

<form action="#" id="myform">
    <div><input type="checkbox" id="checkall"> <label for="checkall"> Check all</label></div>
    <fieldset id="slaves">
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
        <div><label><input type="checkbox"> Checkbox</label></div>
    </fieldset>
</form>

JS:

$('#checkall').checkAll('#slaves input:checkbox', {
    reportTo: function () {
        var prefix = this.prop('checked') ? 'un' : '';
        this.next().text(prefix + 'check all');
    }
});

...und fertig.

http://jsfiddle.net/mattball/NrM2P

InformationsquelleAutor der Antwort Matt Ball

versuchen, diese,

<input type="checkbox" class="checkAll" onclick="$('input[type=checkbox][class=cb-element]').attr('checked',this.checked)">

InformationsquelleAutor der Antwort Kautil

0

Ich weiß, diese Frage ist alt, aber ich bemerkte, dass die meisten Menschen sind mit einem Kontrollkästchen. Die akzeptierte Antwort verwendet eine Schaltfläche, aber nicht die Arbeit mit mehreren Schaltflächen (ex. einer auf der Seite oben eine unten). So, hier ist eine Modifikation, die beide.

HTML
```
<a href="#" class="check-box-machine my-button-style">Check All</a>
```
jQuery
```
var ischecked = false;
$(".check-box-machine").click(function(e) {
    e.preventDefault();
    if (ischecked == false) {
        $("input:checkbox").attr("checked","checked");
        $(".check-box-machine").html("Uncheck All");
        ischecked = true;
    } else {
        $("input:checkbox").removeAttr("checked");
        $(".check-box-machine").html("Check All");
        ischecked = false;
    }
});
```
Diese wird es ermöglichen, dass Sie so viele Schaltflächen, wie Sie möchten, mit wechselnden text-und checkbox-Werte. Ich habe eine e.preventDefault() nennen, weil dies wird stop-die Seite vom Sprung an die Spitze aufgrund der href="#" Teil.

InformationsquelleAutor der Antwort foochow

$(function () {
    $('input#check_all').change(function () {
        $("input[name='input_ids[]']").prop('checked', $(this).prop("checked"));
    });
});

InformationsquelleAutor der Antwort Rokibul Hasan

Hier ist ein link, der verwendet wird, um zu überprüfen, und deaktivieren Sie die parent-und alle untergeordneten Checkboxen sind immer ausgewählt und wieder deaktiviert.

jquery prüfen, deaktivieren Sie alle Checkboxen Mit Jquery Demo

$(function () {
        $("#select-all").on("click", function () {
            var all = $(this);
            $('input:checkbox').each(function () {
                $(this).prop("checked", all.prop("checked"));
            });
        });
    });

InformationsquelleAutor der Antwort Bharath Kumaar

<script type="text/javascript">
    function myFunction(checked,total_boxes){ 
         for ( i=0 ; i < total_boxes ; i++ ){ 
           if (checked){   
             document.forms[0].checkBox[i].checked=true; 
            }else{  
             document.forms[0].checkBox[i].checked=false; 
            } 
        }   
    } 
</script>
    <body>
        <FORM> 
            <input type="checkbox" name="checkBox" >one<br> 
            <input type="checkbox" name="checkBox" >two<br> 
            <input type="checkbox" name="checkBox" >three<br> 
            <input type="checkbox" name="checkBox" >four<br> 
            <input type="checkbox" name="checkBox" >five<br> 
            <input type="checkbox" name="checkBox" >six<br> 
            <input type="checkbox" name="checkBox" >seven<br> 
            <input type="checkbox" name="checkBox" >eight<br> 
            <input type="checkbox" name="checkBox" >nine<br>
            <input type="checkbox" name="checkBox" >ten<br>  s
            <input type=button name="CheckAll" value="Select_All" onClick="myFunction(true,10)"> 
            <input type=button name="UnCheckAll" value="UnCheck All Boxes" onClick="myFunction(false,10)"> 
        </FORM> 
    </body>

InformationsquelleAutor der Antwort Bhushan Sangani

0

fügen Sie diese in Ihrem code-block, oder sogar klicken Sie auf der Schaltfläche
```
$('input:checkbox').attr('checked',false);
```
InformationsquelleAutor der Antwort John

$(document).ready( function() {
        //Check All
        $('.checkall').click(function () {          
            $(":checkbox").attr("checked", true);
        });
        //Uncheck All
        $('.uncheckall').click(function () {            
            $(":checkbox").attr("checked", false);
        });
    });

InformationsquelleAutor der Antwort Vicky

-1

Überprüfen Sie Alle mit deaktivieren/regler prüfen, wenn alle Elemente ist/nicht geprüft

JS:

e = checkbox id t= checkbox (Element) - Klasse n= checkbox überprüfen Sie alle Klasse

function checkAll(e,t,n){jQuery("#"+e).click(function(e){if(this.checked){jQuery("."+t).each(function(){this.checked=true;jQuery("."+n).each(function(){this.checked=true})})}else{jQuery("."+t).each(function(){this.checked=false;jQuery("."+n).each(function(){this.checked=false})})}});jQuery("."+t).click(function(e){var r=jQuery("."+t).length;var i=0;var s=0;jQuery("."+t).each(function(){if(this.checked==true){i++}if(this.checked==false){s++}});if(r==i){jQuery("."+n).each(function(){this.checked=true})}if(i<r){jQuery("."+n).each(function(){this.checked=false})}})}

HTML:

Überprüfen Sie ALLE controle Klasse : chkall_ctrl

<input type="checkbox"name="chkall" id="chkall_up" class="chkall_ctrl"/>
<br/>
1.<input type="checkbox" value="1" class="chkall" name="chk[]" id="chk1"/><br/>
2.<input type="checkbox" value="2" class="chkall" name="chk[]" id="chk2"/><br/>
3.<input type="checkbox" value="3" class="chkall" name="chk[]" id="chk3"/><br/>
<br/>
<input type="checkbox"name="chkall" id="chkall_down" class="chkall_ctrl"/>

<script>
jQuery(document).ready(function($)
{
  checkAll('chkall_up','chkall','chkall_ctrl');
  checkAll('chkall_down','chkall','chkall_ctrl');
});
 </script>

InformationsquelleAutor der Antwort D4Y.be

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.