jQuery চেকবক্স ইভেন্ট হ্যান্ডলিং

136

আমার নিম্নলিখিতগুলি রয়েছে:

<form id="myform">
   <input type="checkbox" name="check1" value="check1">
   <input type="checkbox" name="check2" value="check2">
</form>

যে কোনও চেক ইভেন্টটি myformঘটেছিল তা ক্যাপচার করতে এবং কোন চেকবক্সটি টগল করা হয়েছিল তা জানার জন্য আমি কীভাবে jQuery ব্যবহার করব (এবং এটি টগল করা আছে বা বন্ধ ছিল তা জানতে পারি)?

jquery html checkbox

— aeq
সূত্র

244

$('#myform :checkbox').change(function() {
    // this will contain a reference to the checkbox   
    if (this.checked) {
        // the checkbox is now checked 
    } else {
        // the checkbox is now no longer checked
    }
});

— দারিন দিমিত্রভ
সূত্র

30

thisচেকবক্সের DOM উপাদান ইতিমধ্যে সেট করা আছে তাই this.checkedযথেষ্ট। আপনি যদি এটিকে ম্যানিপুলেট করার পরিকল্পনা না করেন তবে এর জন্য আপনার আর একটি jQuery অবজেক্ট তৈরি করার প্রয়োজন হবে না।

— ওয়ালফ

18

শুধু একটি ছোট টিপ। আপনি ইনপুটটি ব্যবহার করে পারফরম্যান্সের উত্সাহ পাবেন: আপনার নির্বাচকটিতে ন্যায়বিচারের পরিবর্তে চেকবক্স: পরেরটি সর্বজনীন নির্বাচক *: চেকবক্সে অনুবাদ করা হয়েছে বলে।

— জিমিস্টর্মিগ

23

ক্লিক কোনও চেক ইভেন্টের কাছাকাছি নয় ।

— পিটার

27

এটি কোনওভাবেই সেরা উত্তর নয়। আপনার যদি আপনার ইনপুট (যেমন <label for='myInput'>Checkbox:</label><input id='myInput' name='myInput' type='checkbox'/>) এর জন্য সংশ্লিষ্ট লেবেল থাকে এবং আপনি লেবেলে ক্লিক করেন তবে চেকবক্সটি চেক করা হবে, তবে এই ফাংশনটি কল করা হবে না। আপনার .change()ইভেন্টটি ব্যবহার করা উচিত

— প্যাট্রিক 14

7

এই উত্তরটি পুরোপুরি উত্তর সরবরাহ করে না - অনুগ্রহ করে নীচে অনুরাগের উত্তরটি দেখুন, যা অনেক বেশি সম্পূর্ণ (এবং নির্ভুল) উত্তর। এই উত্তরটি অবশ্যই আংশিকভাবে সঠিক, তবে যেমনটি বলা হয়েছে, এটি সর্বোত্তম উত্তর নয়।

— কর্নিক্স

131

পরিবর্তন ইভেন্টটি ব্যবহার করুন।

$('#myform :checkbox').change(function() {
    // this represents the checkbox that was checked
    // do something with it
});

— অনুরাগ
সূত্র

5

যদি চেকবক্সটি গোপন থাকে তবে কোনও ব্যবহারকারী এটির সাথে ইন্টারঅ্যাক্ট করতে সক্ষম হবে না। আপনি অন্য কিছু বোঝাতে চাইলে আমাকে জানান Let

— অনুরাগ

1

এটি আগুন দেয় না $("input[name=check1]").prop('checked', true)। Jsfiddle.net/Z3E8V/2

— পিটার

15

সেটা ডিজাইনের মাধ্যমে। প্রোগ্রামিয়ালি একটি ডিওএম উপাদানটির সম্পত্তি পরিবর্তন সম্পর্কিত ইভেন্ট হ্যান্ডলারদের ট্রিগার করে না। আপনাকে সেগুলি ম্যানুয়ালি ফায়ার করতে হবে।

— অনুরাগ

6

এটি নির্বাচিত উত্তর হওয়া উচিত, এটি একটি চেকবক্সের লেবেল

— প্যাট্রিক

3

JQuery ডকুমেন্টেশন থেকে: "যেহেতু :checkboxএকটি jQuery এক্সটেনশন এবং সিএসএস স্পেসিফিকেশনের অংশ নয়, এর সাহায্যে অনুসন্ধানগুলি :checkboxদেশীয় DOM querySelectorAll()পদ্ধতি দ্বারা সরবরাহিত পারফরম্যান্স বৃদ্ধির সুবিধা নিতে পারে না modern আধুনিক ব্রাউজারগুলিতে আরও ভাল পারফরম্যান্সের জন্য, [type="checkbox"]পরিবর্তে ব্যবহার করুন" "

— এনএক্সটি

54

বেশ কয়েকটি দরকারী উত্তর রয়েছে, তবে সর্বশেষতম বিকল্পগুলি কভার করে না বলে মনে হয় । সে লক্ষ্যে আমার সমস্ত উদাহরণ মিলে যাওয়া labelউপাদানগুলির উপস্থিতিও সরবরাহ করে এবং আপনাকে চেকবক্সগুলি গতিশীলভাবে যুক্ত করতে এবং পার্শ্ব-প্যানেলে ফলাফলগুলি (পুনঃনির্দেশ দ্বারা console.log) দেখার অনুমতি দেয়।

শুনছেন clickঘটনা checkboxesহল না একটি ভাল ধারণা যে কীবোর্ড টগল করা জন্য অথবা প্রণীত যেখানে একটি মানানসই পরিবর্তনের জন্য মঞ্জুরি দেয় না যেমন labelউপাদান ক্লিক করা হয়। changeইভেন্টের জন্য সর্বদা শুনুন ।
:checkboxবরং jQuery সিউডো-সিলেক্টর ব্যবহার করুন input[type=checkbox]। :checkboxখাটো এবং আরও পঠনযোগ্য।
ব্যবহারের is()jQuery সঙ্গে :checkedএকটি চেকবক্স চেক করা হয় কি না পরীক্ষা সিউডো-নির্বাচক। এটি সমস্ত ব্রাউজার জুড়ে কাজ করার গ্যারান্টিযুক্ত।

বিদ্যমান ইভেন্টগুলির সাথে সংযুক্ত বেসিক ইভেন্ট হ্যান্ডলার:

$('#myform :checkbox').change(function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

জেএসফিডাল: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/2/

:checkboxনির্বাচক ব্যবহার করুন , যা ব্যবহার করা ভালinput[type=checkbox]
এটি ইভেন্টটি নিবন্ধিত হওয়ার সময় উপস্থিত থাকা কেবল মিলিত উপাদানগুলির সাথে সংযোগ স্থাপন করে ।

পূর্বপুরুষের উপাদানগুলির সাথে সংযুক্ত প্রেরিত ইভেন্ট হ্যান্ডলার:

ডেলিগেটেড ইভেন্ট হ্যান্ডলারগুলি এমন পরিস্থিতিতে তৈরি করা হয়েছে যেখানে উপাদানগুলি এখনও বিদ্যমান না থাকতে পারে (গতিশীল লোড বা তৈরি করা) এবং এটি খুব দরকারী। তারা পূর্বপুরুষের উপাদানটির (তাই এই শব্দটি) দায়িত্ব অর্পণ করে ।

$('#myform').on('change', ':checkbox', function () {
    if ($(this).is(':checked')) {
        console.log($(this).val() + ' is now checked');
    } else {
        console.log($(this).val() + ' is now unchecked');
    }
});

জেএসফিডাল: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/4/

এটি changeকোনও পরিবর্তন না করে পূর্বসূরি উপাদানগুলিতে বুদবুদ করতে (এই ক্ষেত্রে ) ইভেন্টগুলি শুনে (এই ক্ষেত্রে ) শুনে কাজ করে #myform।
এরপরে এটি ':checkbox'কেবল বুদ্বুদ শৃঙ্খলে থাকা উপাদানগুলিতে jQuery নির্বাচনকারীকে ( এই ক্ষেত্রে) প্রয়োগ করে ।
এটা তোলে তারপর কেবলমাত্র সেই ম্যাচিং উপাদান আছে যা ঘটনা সৃষ্ট ইভেন্ট হ্যান্ডলার ফাংশন প্রযোজ্য।
documentঅন্য কোনও কিছু যদি কাছাকাছি / সুবিধাজনক না হয় তবে ডেলিগ্রেটেড ইভেন্ট হ্যান্ডলারটি সংযুক্ত করতে ডিফল্ট হিসাবে ব্যবহার করুন ।
bodyপ্রতিনিধি ইভেন্টগুলি সংযুক্ত করতে ব্যবহার করবেন না কারণ এতে একটি বাগ রয়েছে (স্টাইলিংয়ের সাথে করা) যা এটি মাউস ইভেন্টগুলি পেতে বন্ধ করতে পারে।

প্রতিনিধি হ্যান্ডলারের উত্সবটি হ'ল ইভেন্টের সময় কেবল ম্যাচের উপাদানগুলির উপস্থিতি থাকা প্রয়োজন, যখন ইভেন্ট হ্যান্ডলারটি নিবন্ধভুক্ত ছিল না not এটি ইভেন্টগুলি উত্পন্ন করতে গতিশীল যুক্ত সামগ্রী যুক্ত করতে দেয়।

প্রশ্ন: এটা কি ধীর?

উত্তর: যতক্ষণ ইভেন্টগুলি ব্যবহারকারী-কথোপকথনের গতিতে থাকে ততক্ষণ আপনার কোনও প্রতিনিধি ইভেন্ট হ্যান্ডলার এবং সরাসরি সংযুক্ত হ্যান্ডলারের মধ্যে গতির তুচ্ছ পার্থক্য সম্পর্কে চিন্তা করার দরকার নেই । প্রতিনিধিদের সুবিধাগুলি যে কোনও ছোটখাটো ক্ষতি ছাড়িয়ে যায়। ডেলিগেটেড ইভেন্ট হ্যান্ডলারগুলি নিবন্ধকরণে আসলে দ্রুত হয় কারণ তারা সাধারণত কোনও একক মিলের উপাদানগুলির সাথে সংযুক্ত থাকে।

কেন অনুষ্ঠান `prop('checked', true)`গুলি চালায় না `change`?

এটি আসলে ডিজাইনের মাধ্যমে। এটি ইভেন্টটিকে আগুন দিলে আপনি সহজেই অন্তহীন আপডেটের পরিস্থিতিতে পড়তে পারেন। পরিবর্তে, পরীক্ষিত সম্পত্তি পরিবর্তনের পরে, একই উপাদানটিতে পরিবর্তিত ইভেন্ট প্রেরণ করুন trigger(না triggerHandler):

যেমন triggerকোন ঘটনা ঘটে না

$cb.prop('checked', !$cb.prop('checked'));

জেএসফিডাল: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/5/

উদাহরণস্বরূপ trigger, সাধারণ পরিবর্তন ইভেন্টটি ধরা পড়ে

$cb.prop('checked', !$cb.prop('checked')).trigger('change');

জেএসফিডাল: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/6/

মন্তব্য:

কোনও triggerHandlerব্যবহারকারীর পরামর্শ অনুসারে ব্যবহার করবেন না কারণ এটি কোনও প্রতিনিধি ইভেন্ট হ্যান্ডলারের ইভেন্টগুলিকে বুদবুদ করবে না ।

জেএসফিডাল: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/8/

যদিও এটি ইভেন্টের সাথে সরাসরি সংযুক্ত ইভেন্ট হ্যান্ডলারের পক্ষে কাজ করবে :

জেএসফিডাল: http://jsfiddle.net/TrueBlueAussie/u8bcggfL/9/

.TiggerHandler () দ্বারা উদ্ঘাটিত ইভেন্টগুলি DOM শ্রেণিবদ্ধত্বে বাধা দেয় না; যদি তারা সরাসরি লক্ষ্য উপাদান দ্বারা পরিচালিত না হয় তবে তারা কিছুই করে না।

তথ্যসূত্র: http://api.jquery.com/triggerhandler/

কারও কাছে অতিরিক্ত বৈশিষ্ট্য রয়েছে বলে তারা মনে করেন এটি এর দ্বারা আওতাভুক্ত নয়, দয়া করে সংযোজনগুলি করার পরামর্শ দিন ।

— গেছেন কোডিং
সূত্র

31

JQuery (1.7) এ নতুন 'অন' পদ্ধতিটি ব্যবহার করা: http://api.jquery.com/on/

    $('#myform').on('change', 'input[type=checkbox]', function(e) {
        console.log(this.name+' '+this.value+' '+this.checked);

    });

ইভেন্ট হ্যান্ডলারটি লাইভ থাকবে
চেকবক্সটি কেবল ক্লিক না করে কীবোর্ড দ্বারা পরিবর্তন করা থাকলে ক্যাপচার করবে

— অ্যালেন হ্যামিল্টন
সূত্র

1

এটি আগুন দেয় না $("input[name=check1]").prop('checked', true)। Jsfiddle.net/Z3E8V/2

— পিটার

7

কল করার .triggerHandler('change');পরে কেবল যুক্ত .propকরুন। তারপরে এটি বাক্সটি টগল করবে এবং ইভেন্টটিকে কল করবে।

— হান্না

5

$('#myform input:checkbox').click(
 function(e){
   alert($(this).is(':checked'))
 }
)

— ভাবুক
সূত্র

val()যদি checkedহয় তা আপনাকে জানায় না true।

— ওয়ালফ

5

প্রশ্নকারী বিশেষত jQuery এর অনুরোধ করেছে এবং নির্বাচিত উত্তরটি সঠিক, এই বিষয়টি স্বীকৃতি স্বীকার করে, এটি লক্ষ করা উচিত যে এই সমস্যাটি আসলে প্রতিটি কথার জন্য jQuery প্রয়োজন নেই । যদি কেউ এই সমস্যাটি সমাধান না করে সমাধান করতে চান তবে যে কেউ onClickচেকবক্সগুলির বৈশিষ্ট্য সেট করতে পারেন যা সে বা সে অতিরিক্ত কার্যকারিতা যুক্ত করতে চায়, যেমন:

এইচটিএমএল:

<form id="myform">
  <input type="checkbox" name="check1" value="check1" onClick="cbChanged(this);">
  <input type="checkbox" name="check2" value="check2" onClick="cbChanged(this);">
</form>

জাভাস্ক্রিপ্ট:

function cbChanged(checkboxElem) {
  if (checkboxElem.checked) {
    // Do something special
  } else {
    // Do something else
  }
}

ফিডল: http://jsfiddle.net/Y9f66/1/

— চেজ স্যান্ডম্যান
সূত্র

5

ইভেন্টের হ্যান্ডলারদের সরাসরি HTML- এ কাজ করা অবশ্যই works তবে এটি ডিআরওয়াই এবং প্রগতিশীল বর্ধন পদ্ধতির সাথে সরাসরি বিরোধে রয়েছে। আরও সঠিক উত্তরটি হ'ল "ইভেন্ট হ্যান্ডলারগুলি যুক্ত করতে আপনার জিকিউরির দরকার নেই" এবং পরিবর্তে, এইচটিএমএলে অনক্লিক বৈশিষ্ট্যগুলি না রেখে, আলাদা জেএস ফাইলে ক্লিক হ্যান্ডলারগুলি সংযুক্ত করতে স্ট্যান্ডার্ড জেএস ব্যবহার করে। "কাজ করে" তবে ভাল কোডিং অনুশীলন হ'ল নির্দেশ দিলে আপনার এড়ানো উচিত (সম্ভব হয় যখন আপনি আইই 6 বা কোনও কিছু সমর্থন না করেন, তবে এমএস এমনকি আপনার আর করা উচিত নয়)

— কার্নিক্স

3

আমি কোডটি প্রথম উত্তর থেকে চেষ্টা করেছি, এটি কাজ করছে না তবে আমার চারপাশে খেলা হয়েছে এবং এটি আমার জন্য কাজ

$('#vip').change(function(){
    if ($(this).is(':checked')) {
        alert('checked');
    } else {
        alert('uncheck');
    }
});

— সোমওয়ং সৌকসাবতদ
সূত্র

jQuery চেকবক্স ইভেন্ট হ্যান্ডলিং

বিদ্যমান ইভেন্টগুলির সাথে সংযুক্ত বেসিক ইভেন্ট হ্যান্ডলার:

মন্তব্য:

পূর্বপুরুষের উপাদানগুলির সাথে সংযুক্ত প্রেরিত ইভেন্ট হ্যান্ডলার:

মন্তব্য:

কেন অনুষ্ঠান prop('checked', true)গুলি চালায় না change?

কেন অনুষ্ঠান `prop('checked', true)`গুলি চালায় না `change`?