एक चेकबॉक्स के परिवर्तन की जाँच की घटना पकड़ो

Question

मैं <input type="checkbox" />jQuery के साथ चेक / अनचेक इवेंट कैसे पकड़ सकता हूं ?

Comments

यदि आप JQuery के अपेक्षाकृत नए संस्करण का उपयोग कर रहे हैं, तो मैं @Daniel De Leon के उत्तर में वर्णित अनुसार .on ('परिवर्तन', फ़ंक्शन () {...}) का उपयोग करूंगा। एक लाभ, "ऑन" ईवेंट श्रोता गतिशील रूप से जेनरेट किए गए html से बंधेगा।

— बीलंग

Answer 1

<input type="checkbox" id="something" />

$("#something").click( function(){
   if( $(this).is(':checked') ) alert("checked");
});

संपादित करें: ऐसा करने पर पकड़ नहीं होगी जब चेकबॉक्स एक क्लिक के अलावा अन्य कारणों से बदलता है, जैसे कीबोर्ड का उपयोग करना। इस समस्या से बचने के लिए changeइसके बजाय सुनो click।

प्रोग्राम को चेक / अनचेक करने के लिए, मेरा चेकबॉक्स परिवर्तन इवेंट ट्रिगर क्यों नहीं है पर एक नज़र डालें ?

Comments

document.getElementById ('कुछ')। चेक किए गए कार्य, क्यों $ ('# कुछ') चेक किए गए कार्य नहीं किए गए?

— omg

आपका कोड एक परान को याद कर रहा है, और वास्तव में चेक स्टेट प्राप्त करने के लिए jQuery के तरीके का उपयोग करना चाहिए।

— पीट मिचौड

शोर: कारण getElementById काम करता है कि यह एक DOM एलिमेंट लौटाता है, जबकि $ jQuery फ़ंक्शन एक jQuery ऑब्जेक्ट देता है। JQuery ऑब्जेक्ट में एक संपत्ति के रूप में DOM तत्व है, लेकिन यह स्वयं, एक DOM ऑब्जेक्ट नहीं है।

— पीट मिकौद

मुझे पता है कि मैं पार्टी में देरी से पहुंच रहा हूं, लेकिन यह तभी काम करता है जब कोई "क्लिक" इवेंट इसे ट्रिगर करता है। यदि किसी कारण से आपको कोड में कहीं और कुछ करना था: $ ("# कुछ")। Attr ("चेक किया गया", "चेक किया गया") क्लिक इवेंट कभी ट्रिगर नहीं होगा।

— डेविड स्टिनेमेट्ज़

@DavidStinemetze: मैं कहूंगा कि आप changeक्लिक के बजाय टन सुन सकते हैं। मैं इस सवाल का जवाब अद्यतन करने कर रहा हूँ

— marcgg

Answer 2

यदि हम इनपुट चेकबॉक्स से जुड़े हैं, तो क्लिक एक लेबल को प्रभावित करेगा?

मुझे लगता है कि .change () फ़ंक्शन का उपयोग करना बेहतर है

<input type="checkbox" id="something" />

$("#something").change( function(){
  alert("state changed");
});

Comments

यह स्वीकृत उत्तर होना चाहिए, क्योंकि प्रश्न चेक ईवेंट के लिए सुनने के बारे में है, न कि एक क्लिक ईवेंट के लिए।

— जेसिका

Answer 3

चेकबॉक्स की स्थिति का निर्धारण करने के लिए : चेक किए गए चयनकर्ता का उपयोग करें :

$('input[type=checkbox]').click(function() {
    if($(this).is(':checked')) {
        ...
    } else {
        ...
    }
});

Answer 4

JQuery 1.7+ उपयोग के लिए:

$('input[type=checkbox]').on('change', function() {
  ...
});

Answer 5

इसे प्राप्त करने के लिए नीचे दिए गए कोड स्निपेट का उपयोग करें।

$('#checkAll').click(function(){
  $("#checkboxes input").attr('checked','checked');
});

$('#UncheckAll').click(function(){
  $("#checkboxes input").attr('checked',false);
});

या आप एकल चेक बॉक्स के साथ भी ऐसा कर सकते हैं:

$('#checkAll').click(function(e) {
  if($('#checkAll').attr('checked') == 'checked') {
    $("#checkboxes input").attr('checked','checked');
    $('#checkAll').val('off');
  } else {
    $("#checkboxes input").attr('checked', false);
    $('#checkAll').val('on'); 
  }
});

डेमो के लिए: http://jsfiddle.net/creativegala/hTtxe/

Answer 6

मेरे अनुभव में, मुझे इस घटना की वर्तमान स्थिति का लाभ उठाना पड़ा है:

$("#dingus").click( function (event) {
   if ($(event.currentTarget).is(':checked')) {
     //checkbox is checked
   }
});

Answer 7

यह कोड आपकी जरूरत को पूरा करता है:

<input type="checkbox" id="check" >check it</input>

$("#check").change( function(){
   if( $(this).is(':checked') ) {
        alert("checked");
    }else{
        alert("unchecked");
   }
});

इसके अलावा, आप इसे jsfiddle पर देख सकते हैं

Answer 8

MSIE के साथ सर्वोत्तम संगतता के लिए क्लिक इवेंट का उपयोग करें

$(document).ready(function() {
    $("input[type=checkbox]").click(function() {
        alert("state changed");
    });
});

Comments

अगर इसकी जांच हो या न हो तो कैसे जज करें?

— omg

मुझे यह जानने की जरूरत है कि क्या एक क्लिक का अर्थ जांचना या अनचेक करना है।

— omg

तब आप केवल क्लिक की गई वस्तु की स्थिति का परीक्षण करने के लिए $ (यह) .is (': चेक') का उपयोग कर सकते हैं

— Ty W

Answer 9

$(document).ready(function(){
    checkUncheckAll("#select_all","[name='check_boxes[]']");
});

var NUM_BOXES = 10;
// last checkbox the user clicked
var last = -1;
function check(event) {
  // in IE, the event object is a property of the window object
  // in Mozilla, event object is passed to event handlers as a parameter
  event = event || window.event;

  var num = parseInt(/box\[(\d+)\]/.exec(this.name)[1]);
  if (event.shiftKey && last != -1) {
    var di = num > last ? 1 : -1;
    for (var i = last; i != num; i += di)
      document.forms.boxes['box[' + i + ']'].checked = true;
  }
  last = num;
}
function init() {
  for (var i = 0; i < NUM_BOXES; i++)
    document.forms.boxes['box[' + i + ']'].onclick = check;
}

HTML:

<body onload="init()">
  <form name="boxes">
    <input name="box[0]" type="checkbox">
    <input name="box[1]" type="checkbox">
    <input name="box[2]" type="checkbox">
    <input name="box[3]" type="checkbox">
    <input name="box[4]" type="checkbox">
    <input name="box[5]" type="checkbox">
    <input name="box[6]" type="checkbox">
    <input name="box[7]" type="checkbox">
    <input name="box[8]" type="checkbox">
    <input name="box[9]" type="checkbox">
  </form>
</body>

Comments

अरे! दोस्त, तुम यहाँ क्या कर रहे हो?

— omg

एक सीमा चयन की तरह लगता है (यानी, पहले आइटम की जांच करें, शिफ्ट को दबाए रखें, पिछले एक की जांच करें, और उन सभी के बीच की जाँच की जाती है।) हालांकि, यह उस प्रश्न के लिए बहुत अधिक है जो पूछता है। हालाँकि, कुछ कोड गुम हैं, जैसे checkUncheckAll ()।

— जॉल्सैंड