jQuery के चेकबॉक्स ने स्थिति बदली हुई घटना की जाँच की

Question

जब चेकबॉक्स चेक / अनचेक किया जाता है तो मुझे क्लाइंट साइड फायर करने के लिए एक ईवेंट चाहिए:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

मूल रूप से मैं चाहता हूं कि यह पृष्ठ पर प्रत्येक चेकबॉक्स के लिए हो। क्या यह क्लिक पर फायरिंग और राज्य की जाँच ठीक है?

मुझे लगता है कि एक क्लीनर jQuery रास्ता होना चाहिए। किसी को भी एक समाधान पता है?

Comments

क्या इस सवाल को फिर से पूछने की ज़रूरत है, जहाँ

— स्टैकओवरफ़्लो

@ मुझे नहीं लगता कि वे डुप्लिकेट हैं क्योंकि जुड़ा हुआ प्रश्न चेकबॉक्स की स्थिति प्राप्त करने के बारे में है, जबकि यह एक चेक किए गए ईवेंट के बारे में है।

— राहेल

मुझे हमेशा इस जाँच की गई संपत्ति की खोज करनी है, इसे प्राप्त करने के कई तरीके हैं जैसे कि यहाँ लिखा गया है

— user3199690

Answer 1

के changeबजाय घटना के लिए बाध्य करें click। हालाँकि, आपको शायद चेकबॉक्स चेक करने या न करने की आवश्यकता होगी:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

changeईवेंट के दौरान ईवेंट को बाइंड करने का मुख्य लाभ clickयह है कि चेकबॉक्स पर सभी क्लिक्स इसे बदलने की स्थिति में नहीं आएंगे। यदि आप केवल उन घटनाओं को कैप्चर करना चाहते हैं जो चेकबॉक्स को स्थिति बदलने का कारण बनाती हैं, तो आप उपयुक्त नाम वाली changeघटना चाहते हैं। टिप्पणियों में कम किया गया

यह भी ध्यान दें कि मैंने this.checkedतत्व को jQuery ऑब्जेक्ट में लपेटने के बजाय और jQuery विधियों का उपयोग करने के लिए उपयोग किया है, केवल इसलिए कि यह DOM तत्व की संपत्ति तक सीधे पहुंचने के लिए छोटा और तेज़ है।

संपादित करें (टिप्पणियां देखें)

सभी चेकबॉक्स प्राप्त करने के लिए आपके पास कुछ विकल्प हैं। आप उपयोग कर सकते हैं:checkbox छद्म चयनकर्ता का :

$(":checkbox")

या आप एक विशेषता का उपयोग कर सकते हैं चयनकर्ता के बराबर :

$("input[type='checkbox']")

Comments

वास्तव में मुझे यह वर्ग द्वारा चेकबॉक्स की तलाश में मिला है। क्या क्लास की परवाह किए बिना सभी चेकबॉक्स प्राप्त करने का एक बेहतर तरीका है?

— 22

@AnonyMouse - मेरा संपादन देखें इसे करने के कुछ तरीके हैं।

— जेम्स एलारडाइस

@Vigrond - दरअसल, एक लेबल पर क्लिक करने से संबंधित नियंत्रण पर क्लिक ईवेंट ट्रिगर होता है: jsfiddle.net/ZFG84

— जेम्स एलार्डिस

यह बहुत क्लीनर है $(this).is(':checked')। मुझे लगा कि changeयदि आप कीबोर्ड (टैबिंग, हिटिंग स्पेस) से परिवर्तनों का पता लगाना चाहते हैं, तो आपको घटना का उपयोग करना होगा, लेकिन आश्चर्यजनक रूप से, clickउन परिवर्तनों का भी पता लगाता है जो माउस क्लिक से नहीं हैं, निश्चित नहीं कि यह jQuery की बात है, jsfiddle.net / मेंडेसजुआन / E39sz

— जुआन मेंडेस

कृपया ध्यान दें: किसी भी घटना को click, changeया पृष्ठ पर सभी चेकबॉक्स को बांधने से प्रदर्शन समस्याएँ हो सकती हैं (चेकबॉक्स की मात्रा पर निर्भर करता है)। मूल तत्व या दस्तावेज को बांधने की कोशिश करें और $('form').on('change', ':checkbox', function(){ //stuff });

— बुदबुदाती हुई

Answer 2

यहां किसी के भी भविष्य के संदर्भ में कठिनाई हो रही है, यदि आप गतिशील रूप से चेकबॉक्स जोड़ रहे हैं, तो ऊपर दिया गया सही उत्तर काम नहीं करेगा। आपको ईवेंट प्रतिनिधिमंडल का लाभ उठाने की आवश्यकता होगी जो एक मूल नोड को एक विशिष्ट वंशज से बुदबुदाती हुई घटनाओं को पकड़ने और कॉलबैक जारी करने की अनुमति देता है।

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

ध्यान दें कि यह उपयोग करने के लिए लगभग हमेशा अनावश्यक है document माता-पिता के चयनकर्ता के । इसके बजाय घटना को कई स्तरों तक प्रचारित करने से रोकने के लिए अधिक विशिष्ट मूल नोड चुनें।

नीचे दिए गए उदाहरण से पता चलता है कि कैसे गतिशील रूप से जोड़े गए डोम नोड्स की घटनाएं पहले से परिभाषित श्रोताओं को ट्रिगर नहीं करती हैं।

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

जबकि यह उदाहरण एक विशिष्ट नोड ( h1इस मामले में) के लिए घटनाओं को पकड़ने के लिए इवेंट डेलिगेशन के उपयोग को प्रदर्शित करता है , और इस तरह के इवेंट के लिए कॉलबैक जारी करता है।

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

Answer 3

बस एक और उपाय

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

Comments

हालांकि यह कोड इस प्रश्न का उत्तर दे सकता है, कि यह कोड क्यों और / या इस बारे में अतिरिक्त संदर्भ प्रदान करता है कि यह प्रश्न इसके दीर्घकालिक मूल्य में सुधार करता है।

— JAL

Answer 4

यदि आपका इरादा केवल चेक किए गए चेकबॉक्स पर ईवेंट संलग्न करने का है (इसलिए यह अनियंत्रित होने पर आग लग जाएगी और बाद में फिर से जाँच की जाएगी) तो यह वही है जो आप चाहते हैं।

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

यदि आपका इरादा सभी चेकबॉक्स (चेक और अनियंत्रित) में ईवेंट संलग्न करना है

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

यदि आप चाहते हैं कि यह केवल तभी फायर करे जब उन्हें (अनियंत्रित से) चेक किया जा रहा हो तो @James Allardice ऊपर जवाब दें।

BTW input[type='checkbox']:checkedCSS चयनकर्ता है।

Comments

क्या होगा यदि आप केवल चेक-चेक किए गए चेकबॉक्स नहीं ढूंढना चाहते हैं? मेरे पास यह सब चेक किए गए $ के लिए है ("# tableUSNW tbody tr td [id = td1]: चेकबॉक्स: चेक किया गया);" लेकिन मुझे नहीं पता कि सभी गैर-चेक किए गए कैसे मिलेंगे।

— FrenkyB

@FrenkyB निम्नलिखित प्रयास करें:$("input[type='checkbox']:not(:checked)")

— Matas Vaitkevicius

Answer 5

$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});

Answer 6

किसी ईवेंट (क्लिक इवेंट पर) के आधार पर कार्रवाई करना।

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

वर्तमान स्थिति के आधार पर कार्रवाई किए बिना।

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

Comments

'क्लिक' ईवेंट इस मामले में काम नहीं करता है। 'परिवर्तन' कार्यों पर

— महमूद मेमन

Answer 7

शायद यह आपके लिए एक विकल्प हो सकता है।

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

Answer 8

यह खोजने के लिए समाधान है चेकबॉक्स की जांच की गई है या नहीं। # प्रॉप () फ़ंक्शन // का उपयोग करें

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

Answer 9

इस jQuery सत्यापन का प्रयास करें

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>

Answer 10

बहुत सरल है, यह तरीका है जो मैं उपयोग करता हूं:

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

सादर!