jQuery চেকবক্স চেক রাষ্ট্র পরিবর্তন ইভেন্ট

Question

চেকবক্সটি চেক / চেক করা না থাকলে আমি ক্লায়েন্টের পক্ষ থেকে গুলি চালানোর জন্য একটি ইভেন্ট চাই:

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

মূলত আমি চাই যে পৃষ্ঠায় প্রতিটি চেকবক্সের জন্য এটি ঘটুক। ক্লিক করার উপর গুলি চালানোর এই পদ্ধতিটি কি রাষ্ট্র ঠিক আছে?

আমি ভাবছি এখানে অবশ্যই একটি ক্লিনার jQuery উপায় থাকতে হবে। সমাধান কি কেউ জানেন?

Comments

আবার সেখানে, যেখানে একটি খুব উপরের ভোট একই প্রশ্ন Stackoverflow বিদ্যমান .... এই প্রশ্ন জিজ্ঞাসা কোনো প্রয়োজন নেই stackoverflow.com/questions/901712/...

— আরিফুল ইসলাম

@ আরিফ আমার মনে হয় না যে এগুলি সদৃশ হয়ে গেছে কারণ লিঙ্কযুক্ত প্রশ্নটি একটি চেকবক্সের অবস্থা পাওয়ার বিষয়ে, যখন এইটি একটি পরীক্ষিত ইভেন্ট সম্পর্কে।

— রাচেল

আমাকে সর্বদা এই চেক করা সম্পত্তিটি অনুসন্ধান করতে হবে, এখানে লিখিত হিসাবে

— user3199690

Answer 1

changeপরিবর্তে ইভেন্টে বাঁধুন click। তবে, আপনার সম্ভবত এখনও চেকবক্সটি চেক করা হয়েছে কিনা তা যাচাই করা দরকার:

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

changeইভেন্টের উপর ইভেন্টের উপর বাঁধার মূল সুবিধাটি clickহ'ল চেকবক্সের সমস্ত ক্লিকের কারণে এটি রাষ্ট্র পরিবর্তন করতে পারে না। যদি আপনি কেবল সেই ইভেন্টগুলি ক্যাপচার করতে চান যা চেকবক্সকে রাষ্ট্র পরিবর্তন করতে দেয় তবে আপনি যথাযথ-নামকৃত changeইভেন্টটি চান। মন্তব্যে কমছে

আরও মনে রাখবেন যে আমি this.checkedjQuery অবজেক্টে উপাদানটি মোড়ানোর পরিবর্তে এবং jQuery পদ্ধতিগুলি ব্যবহার করার পরিবর্তে ব্যবহার করেছি , কেবল এটি ডম উপাদানটির সম্পত্তিতে সরাসরি অ্যাক্সেস করার জন্য স্বল্প এবং দ্রুত।

সম্পাদনা করুন (মন্তব্য দেখুন)

সমস্ত চেকবক্স পেতে আপনার কাছে কয়েকটি বিকল্প রয়েছে। আপনি :checkboxছদ্ম-নির্বাচক ব্যবহার করতে পারেন :

$(":checkbox")

অথবা আপনি কোনও বৈশিষ্ট্য সমান নির্বাচক ব্যবহার করতে পারেন :

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

Comments

প্রকৃতপক্ষে আমি ক্লাসে এটি চেকবক্সটি সন্ধান করেছি। শ্রেণি নির্বিশেষে সমস্ত চেকবাক্স পাওয়ার আরও ভাল উপায় কি আছে?

— অ্যানিমাউস

@ অ্যানিমাউস - আমার সম্পাদনা দেখুন। এটি করার কয়েকটি উপায় রয়েছে।

— জেমস আলার্ডার্ডিস

@ ভিগ্রন্ড - আসলে, কোনও লেবেল ক্লিক করা সম্পর্কিত নিয়ন্ত্রণে ক্লিক ইভেন্টটিকে ট্রিগার করে: jsfiddle.net/ZFG84

— জেমস

এটি তুলনায় অনেক পরিষ্কার $(this).is(':checked')। আমি ভেবেছিলাম আপনি changeকী-বোর্ড (ট্যাবিং, হিট স্পেস) থেকে পরিবর্তনগুলি সনাক্ত করতে চান তবে আপনাকে ইভেন্টটি ব্যবহার করতে হবে , তবে আশ্চর্যরূপে, clickএমন পরিবর্তনগুলিও সনাক্ত করে যা মাউস ক্লিক থেকে আসে না, নিশ্চিত না যে এটি কোনও jQuery জিনিস, jsfiddle.net / mendesjuan / 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

এই কোডটি প্রশ্নের উত্তর দিতে পারে, কেন এবং / অথবা এই কোডটির প্রশ্নের উত্তর কীভাবে তার দীর্ঘমেয়াদী মানকে উন্নত করে সে সম্পর্কে অতিরিক্ত প্রসঙ্গ সরবরাহ করে।

— জাল

Answer 4

যদি আপনার উদ্দেশ্যটি কেবল পরীক্ষিত চেকবক্সগুলিতে ইভেন্ট সংযুক্ত করা হয় (যাতে তারা যখন চেক না করে এবং পরে আবার চেক করা হয় তখন এটি আগুনে ছড়িয়ে পড়ে) তবে আপনি যা চান তা এই।

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

    })
})

যদি আপনার উদ্দেশ্যটি সমস্ত চেকবক্সগুলিতে ইভেন্ট সংযুক্ত করা হয় (চেকড এবং চেক না করা)

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

    })
})

যদি আপনি এটি কেবল তখনই জ্বলতে চান যখন সেগুলি পরীক্ষা করা হচ্ছে (যাচাই করা থেকে) তারপরে @ জেমস এলার্ডাইস উপরের উত্তর দিন।

বিটিডাব্লু input[type='checkbox']:checkedহলেন সিএসএস নির্বাচক।

Comments

আপনি যদি কেবল চেকড নয় চেকবক্সগুলি সন্ধান করতে চান তবে কী হবে? আমার কাছে এটি সমস্ত পরীক্ষিত for ("# টেবিল ইউএসএনডব্লিউ টিডি টিডি টিডি [আইডি = টিডি 1]: চেকবক্স: পরীক্ষিত") জন্য রয়েছে; তবে আমি জানি না কীভাবে সমস্ত চেক না করা আছে।

— ফ্রেনকিবি

@ ফ্রেঙ্কিবি নিম্নলিখিত চেষ্টা করুন:$("input[type='checkbox']:not(:checked)")

— মাতাস

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

এটি সমাধানের সমাধান হ'ল চেকবক্সটি চেক করা হয় কিনা। #Prop () ফাংশনটি ব্যবহার করুন //

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

শুভেচ্ছা সহ!