javascript - jQuery चेकबॉक्स चेक राज्य बदल गया घटना




event-handling (5)

जब कोई चेकबॉक्स चेक / अनचेक किया जाता है तो मैं क्लाइंट पक्ष को आग लगाना चाहता हूं:

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

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

मैं सोच रहा हूं कि एक क्लीनर jQuery तरीका होना चाहिए। किसी को भी समाधान पता है?


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

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

बस एक और समाधान

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

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

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


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

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

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






event-handling