चेकबॉक्स को चालू / बंद करें

Question

मेरे पास निम्नलिखित हैं:

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

मुझे पसंद है id="select-all-teammembers"जब चेक और अनचेक के बीच टॉगल करने के लिए क्लिक किया गया। विचार? कोड की दर्जनों लाइनें नहीं हैं?

Answer 1

तुम लिख सकते हो:

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

1.6 jQuery से पहले, जब हमारे पास केवल attr () और प्रोप नहीं था () , हम लिखते थे:

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

लेकिन "बूलियन" HTML विशेषताओं पर लागू होने की prop()तुलना में बेहतर शब्दार्थ है attr(), इसलिए यह इस स्थिति में आमतौर पर पसंद किया जाता है।

Comments

यह पहले की स्थिति को बंद कर देता है, इसलिए यह पूरी तरह से मिल सकता है (इसलिए यदि उपयोगकर्ता पहले एक को देखता है, तो टॉगल का उपयोग करता है, वे सिंक से बाहर निकल जाएंगे)। थोड़ा घुमा हुआ है, इसलिए यह टॉगल की स्थिति को बंद कर देता है, सूची में पहला चेकबॉक्स नहीं: $ ("इनपुट [नाम = प्राप्तकर्ताओं \ [\]]")। प्रोप ("चेक किया गया", $ (यह) .prop (") जाँच "));

— २२:२४ बजे कुकीज़

'प्रोप' का उपयोग करने से यह काम ज़ेप्टो के लिए भी होता है। अन्यथा यह बॉक्स को चेक करेगा, लेकिन इसे अनचेक नहीं करेगा।

— २०:१२ पर सिंपलजी

"att" के बजाय "attr" ने चाल चली: "attr" के साथ यह थोड़ी देर के लिए टॉगल करता है और फिर रुक जाता है, "Prop" के बजाय यह अपेक्षित रूप से टॉगल करता है। अद्यतन के लिए +1।

— TechNyquist

$('input[type=checkbox]').trigger('click');नीचे @ 2astalavista द्वारा उल्लेख अधिक रसीला है और "परिवर्तन" घटना को भी ट्रिगर करता है।

— यहां

क्या आप अपना जवाब एडिट करने के लिए @ CookiesForDevo के उत्तर को प्राप्त कर सकते हैं

— acquayefrank

Answer 2

//this toggles the checkbox, and fires its event if it has    

$('input[type=checkbox]').trigger('click'); 
//or
$('input[type=checkbox]').click(); 

Comments

क्रोम 29 में काम करता है लेकिन एफएफ 17.0.7 में नहीं, क्या कोई इसकी पुष्टि कर सकता है?

— ग्रिद्दो

मैं इतने लंबे समय से प्रॉपर्टी बदलने का रूट बना रहा था। मेरे लिए यह चेकबॉक्स तत्वों की जाँच और अनचेक करने के लिए एक महान और अधिक लचीला दृष्टिकोण है।

— इस्योमा न्नोडम

अवांछित घटना शुरू हो जाती है।

— जहॉन्ग अह्न

चेकबॉक्स के लिए, आमतौर पर 'परिवर्तन' की घटना को आग देना अधिक उचित होता है, क्योंकि उन्हें एक लेबल पर क्लिक करके बदला जा सकता है।

— पीटर लेनजो

Answer 3

मुझे पता है कि यह पुराना है, लेकिन सवाल थोड़ा अस्पष्ट था कि टॉगल का मतलब हो सकता है कि प्रत्येक चेकबॉक्स को अपने राज्य को टॉगल करना चाहिए, जो कुछ भी हो। यदि आपने 3 चेक किए हैं और 2 अनियंत्रित हैं, तो टॉगल करने से पहले 3 अनियंत्रित हो जाएंगे और अंतिम 2 चेक किए जाएंगे।

उसके लिए, यहां कोई भी समाधान काम नहीं करता है क्योंकि वे सभी चेकबॉक्सों को एक ही स्थिति बनाते हैं, बल्कि प्रत्येक चेकबॉक्स की स्थिति को टॉगल करते हैं। ऐसा करने से $(':checkbox').prop('checked')कई चेक बॉक्स पर तार्किक रिटर्न और सभी के बीच .checkedद्विआधारी गुण, यानी अगर उनमें से एक हटाया गया है, दिए गए मान है false।

.each()यदि आप वास्तव में प्रत्येक चेकबॉक्स स्थिति को टॉगल करना चाहते हैं, तो आप उन्हें सभी समान, उदाहरण के लिए उपयोग करना चाहते हैं

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

ध्यान दें कि आपको $(this)हैंडलर के अंदर की आवश्यकता नहीं है क्योंकि .checkedसंपत्ति सभी ब्राउज़रों में मौजूद है।

Comments

हाँ, यह सभी चेकबॉक्सों की स्थिति का सही जवाब है!

— सेडवेल

जब आप बहुत सारे चेकबॉक्स होते हैं, तो jQuery से ट्रिगर पर क्लिक करने की तुलना में तेज़ी के आदेश।

— जेरेमी कुक

Answer 4

यहाँ एक और तरीका है जो आप चाहते हैं।

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

Comments

वह भीख नहीं है।

— AgentFire

@kst - यह एक बेहतर तरीका है $ ('इनपुट [नाम = प्राप्तकर्ताओं \ [\]]')। टॉगल (यह) कक्षाओं को भूल जाओ।

— डेविस

Answer 5

मुझे लगता है कि बस एक क्लिक को ट्रिगर करना आसान है:

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

Answer 6

सबसे अच्छा तरीका मैं सोच सकता हूं।

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

या

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

या

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

Answer 7

JQuery 1.6 के बाद से आप .prop(function)प्रत्येक पाया तत्व की जाँच की स्थिति टॉगल करने के लिए उपयोग कर सकते हैं :

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

Comments

बहुत बढ़िया जवाब। क्या आप पहले पैरा के रूप में अंडरस्कोर पास करने के बारे में अधिक जानते हैं? मैं इसके बारे में और कहाँ जान सकता था?

— user1477388

संपादित करें: जाहिरा तौर पर, यह अनिवार्य रूप से अशक्त stackoverflow.com/questions/11406823/…

— user1477388

Answer 8

इस प्लगइन का उपयोग करें:

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

   }

फिर

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

Answer 9

यह मानते हुए कि यह एक छवि है जिसमें चेकबॉक्स को टॉगल करना है, यह मेरे लिए काम करता है

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

Comments

चूँकि यह आपका पहला उत्तर है, इस बात का एहसास करें कि प्रश्न में इस्तेमाल किए गए पोस्टर के पैटर्न का पालन करना सबसे अच्छा है - जैसे दस्तावेज़ तैयार हैंडलर में jQuery कोड डालना और मार्कअप में इन-लाइन नहीं। यदि आपके पास ऐसा नहीं करने का कारण है, तो स्पष्टीकरण को क्यों जोड़ें।

— मार्क शुल्त्स

Answer 10

चेक-सभी चेकबॉक्स को कुछ शर्तों के तहत ही अपडेट किया जाना चाहिए । फिर '# select-all-teammembers' पर क्लिक करें और फिर कुछ आइटम्स अनचेक करें और फिर से all-select पर क्लिक करें। आप असंगति देख सकते हैं। इसे रोकने के लिए निम्नलिखित चाल का उपयोग करें:

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

BTW सभी चेकबॉक्स डोम-ऑब्जेक्ट को ऊपर वर्णित के अनुसार कैश किया जाना चाहिए।

Answer 11

HTML5 और लेबल वाले चेकबॉक्स का चयन किए बिना चेकबॉक्स को टॉगल करने के लिए एक jQuery तरीका है:

 <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

Answer 12

यदि आप प्रत्येक बॉक्स को व्यक्तिगत रूप से टॉगल करना चाहते हैं (या सिर्फ एक बॉक्स काम करता है):

मैं .each () का उपयोग करने की सलाह देता हूं, क्योंकि अगर आप अलग-अलग चीजें चाहते हैं, तो संशोधित करना आसान है, और फिर भी अपेक्षाकृत कम और पढ़ने में आसान है।

जैसे:

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

एक साइड नोट पर ... यह निश्चित नहीं है कि हर कोई .attr () या .prop () से (संयुक्त राष्ट्र) चीजों की जांच क्यों करता है।

जहाँ तक मुझे पता है, element.checked ने हमेशा सभी ब्राउज़रों में समान काम किया है?

Answer 13

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

;)

Answer 14

आप इस तरह भी लिख सकते हैं

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

उपयोगकर्ता को '# चेकबॉक्स-टॉगल' बटन पर क्लिक करने पर बस चेक बॉक्स के ईवेंट पर क्लिक करने की आवश्यकता है।

Answer 15

एक बेहतर दृष्टिकोण और यूएक्स

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

Answer 16

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

प्रयत्न:

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

Answer 17

यह मेरे लिए बहुत अच्छा काम करता है।

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

Comments

आपको एहसास है कि आप "चेक की गई" संपत्ति को ठीक उसी मूल्य दे रहे हैं जो पहले से ही सही है? यह थोड़ा शर्मनाक नहीं है? आप स्पष्ट रूप !से इसके पहले एक संकेत देने का मतलब था ..

— vsync

Answer 18

सबसे बुनियादी उदाहरण होगा:

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

Answer 19

बस आप इसका उपयोग कर सकते हैं

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

Answer 20

मेरे विचार में, सबसे सामान्य व्यक्ति जिसने सामान्य रूप का सुझाव दिया है वह है गिगोलनेट गिगोलशविली, लेकिन मैं और भी सुंदर रूप देना चाहता हूँ। इसे जाँचे

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

Answer 21

क्रमशः सत्य या असत्य के बजाय 'जाँच' या अशक्त करना कार्य करेगा।

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

Answer 22

यह कोड वेब टेम्पलेट में उपयोग किए जाने वाले किसी भी टॉगल स्विच एनीमेटर पर क्लिक करके चेक बॉक्स को टॉगल करेगा। ".Onoffswitch-label" को अपने कोड में उपलब्ध बदलें। "चेकबॉक्स" यहां चेक किया गया चेकबॉक्स है।

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

Answer 23

वैसे एक आसान तरीका है

पहले अपने चेकबॉक्स को एक क्लास उदाहरण 'id_chk' दें

फिर चेकबॉक्स के अंदर 'id_chk' चेकबॉक्स को नियंत्रित करेगा।

<input type='checkbox' onchange='js:jQuery(".id_chk").prop("checked", jQuery(this).prop("checked"))' />

Thats सभी, आशा है कि यह मदद करता है