চেকবক্সের পরিবর্তন ইভেন্টটি চেক করুন

Question

আমি কীভাবে <input type="checkbox" />jQuery এর সাথে চেক / আনচেক ইভেন্টটি ধরব ?

Comments

আপনি যদি JQuery এর অপেক্ষাকৃত নতুন সংস্করণ ব্যবহার করছেন তবে আমি নীচে @ ড্যানিয়েল ডি লিওনের উত্তরে উল্লিখিত .on ('পরিবর্তন', ফাংশন () {...}) ব্যবহার করব। একটি সুবিধা, "শ্রোতা" ইভেন্ট শ্রোতা গতিময়ভাবে উত্পন্ন এইচটিএমএলকে আবদ্ধ করবে।

— বিএল্যাং

Answer 1

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

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

সম্পাদনা করুন: কীবোর্ড ব্যবহারের মতো ক্লিকের চেয়ে অন্য কারণে চেকবক্সটি পরিবর্তিত হয়ে গেলে এটি করা যাবে না। এই সমস্যাটি এড়াতে changeপরিবর্তে শুনুন click।

প্রোগ্রামগতভাবে চেক / আনচেকিংয়ের জন্য, আমার চেকবক্স পরিবর্তন ইভেন্টটি কেন ট্রিগার হয় না তা একবার দেখুন ?

Comments

document.getElementById ('কিছু')। চেক করা কাজ করে, কেন $ ('# কিছুর') .চেকড কাজ করছে না?

— ওএমজি

আপনার কোডটিতে একটি পারান অনুপস্থিত এবং চেকের অবস্থা পাওয়ার জন্য jQuery উপায়টি ব্যবহার করা উচিত।

— পিট মিচাড

শোর: getulementById কাজ করার কারণ হ'ল এটি একটি DOM উপাদানকে ফেরত দেয়, যেখানে Qu jQuery ফাংশনটি একটি jQuery অবজেক্ট প্রদান করে। JQuery অবজেক্টটির সম্পত্তি হিসাবে DOM উপাদান থাকে তবে এটি নিজেই কোনও DOM অবজেক্ট নয়।

— পিট মিচাড

আমি জানি আমি পার্টিতে দেরিতে পৌঁছে যাচ্ছি, তবে এটি কেবল তখনই কাজ করে যখন কোনও "ক্লিক" ইভেন্ট এটি ট্রিগার করে। যদি কোনও কারণে আপনি কোডের মতো অন্য কোথাও এমন কিছু করতে থাকেন: $ ("# #") r

— ডেভিড স্টাইনমেটেজে

@ ডেভিডস্টাইনমেজ: আমি বলব যে আপনি changeক্লিকের পরিবর্তে টন শুনতে পাচ্ছেন । আমি উত্তরটি আপডেট করছি

— মার্চজি

Answer 2

আমাদের যদি ইনপুট চেকবক্সের সাথে একটি সংযুক্ত থাকে তবে ক্লিকটি কোনও লেবেলে প্রভাব ফেলবে?

আমি মনে করি এটি পরিবর্তন () ফাংশনটি ব্যবহার করা আরও ভাল

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

এছাড়াও, আপনি এটি জেসফিডেলে পরীক্ষা করতে পারেন

Answer 8

এমএসআইইর সাথে সেরা সামঞ্জস্যের জন্য ক্লিক ইভেন্টটি ব্যবহার করুন

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

Comments

এটি পরীক্ষা করা আছে কিনা তা কীভাবে বিচার করবেন?

— ওএমজি

কোনও ক্লিকের অর্থ এটি পরীক্ষা করা বা চেক করা বন্ধ করা উচিত কিনা তা আমার জানতে হবে।

— ওএমজি

আপনি কেবলমাত্র ক্লিক করা আইটেমের অবস্থা পরীক্ষা করতে test (এটি) .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;
}

এইচটিএমএল:

<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

ওহে বন্ধু, তুমি এখানে কি করছ?

— ওমগ

দেখে মনে হচ্ছে একটি পরিসীমা নির্বাচন (যেমন, প্রথম আইটেমটি চেক করুন, শিফটটি ধরে রাখুন, শেষটি পরীক্ষা করুন; এবং এর মধ্যে থাকা সমস্তগুলি যাচাই করা হয়েছে)) তবে, প্রশ্নটি জিজ্ঞাসা করার চেয়ে এটি অনেক বেশি। চেকউনচেকএল () এর মতো কিছু কোড অবশ্য অনুপস্থিত।

— joelsand