অনক্লিক / অনচেঞ্জ ইভেন্ট থেকে HTML চেকবাক্সের মান পাওয়া box

Question

<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />

এর মধ্যে onClickHandlerএবং / অথবা থেকে onChangeHandler, আমি কীভাবে নির্ধারণ করতে পারি যে চেকবক্সের নতুন অবস্থা কী?

Answer 1

সংক্ষিপ্ত উত্তর:

clickইভেন্টটি ব্যবহার করুন , যা মান আপডেট হওয়ার পরে আগুন জ্বলবে না এবং আপনি যখন চান এটি অগ্নিসংযোগ করবে:

<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>

function handleClick(cb) {
  display("Clicked, new value = " + cb.checked);
}

সরাসরি উদাহরণ | উৎস

দীর্ঘ উত্তর:

changeইভেন্ট হ্যান্ডলার বলা হয় না যতক্ষণ না checkedরাষ্ট্র আপডেট করা হয়েছে ( লাইভ উদাহরণস্বরূপ | উৎস ), কিন্তু কারণ (টিম Buthe মন্তব্য তুলে ধরে হিসাবে) ইন্টারনেট আগুন নেই changeঘটনা পর্যন্ত চেকবক্সটি ফোকাস হারায়, আপনি পাবেন না সক্রিয়ভাবে বিজ্ঞপ্তি। সবচেয়ে খারাপ, IE এর সাথে যদি আপনি এটি আপডেট করতে চেকবক্সের জন্য (কেবলমাত্র চেকবক্সের পরিবর্তে) কোনও লেবেল ক্লিক করেন , আপনি যে ধারণাটি পেয়ে যাচ্ছেন যে আপনি পুরানো মূল্য পেয়েছেন তা পেতে পারেন (লেবেলটিতে ক্লিক করে এখানে IE সহ চেষ্টা করুন: লাইভ উদাহরণ | উত্স )। এটি কারণ যদি চেকবক্সটি ফোকাস করে থাকে তবে লেবেলটি ক্লিক করা ফোকাসটিকে তার থেকে দূরে সরিয়ে দেয়, changeইভেন্টটিকে পুরানো মান দিয়ে ফায়ার করে এবং তারপরেclickনতুন মান সেট করা এবং চেকবক্সে ফোকাস সেট করা আবার ঘটে। খুবই বিভ্রান্তিকর.

আপনি যদি এর clickপরিবর্তে ব্যবহার করেন তবে আপনি সেই অপ্রীতিকর সব এড়াতে পারেন ।

আমি DOM0 হ্যান্ডলার ( onxyzঅ্যাট্রিবিউটস) ব্যবহার করেছি কারণ আপনি যা চেয়েছিলেন সেটিই কিন্তু রেকর্ডের জন্য, আমি সাধারণত বৈশিষ্ট্যগুলি ব্যবহার না করে কোড (DOM2 এর addEventListener, বা attachEventIE এর পুরানো সংস্করণগুলিতে ) হ্যান্ডলারের সন্ধানের পরামর্শ দেব onxyz। এটি আপনাকে একই উপাদানের সাথে একাধিক হ্যান্ডলার সংযুক্ত করতে দেয় এবং আপনাকে আপনার সমস্ত হ্যান্ডলারের বৈশ্বিক ক্রিয়াকলাপ এড়াতে দেয়।

---

এই উত্তরের পূর্ববর্তী সংস্করণে এই কোডটি ব্যবহার করেছে handleClick:

function handleClick(cb) {
  setTimeout(function() {
    display("Clicked, new value = " + cb.checked);
  }, 0);
}

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

Comments

ভাগ্যক্রমে onchangeসঠিকভাবে কাজ করে +IE9। সূত্র

— মরি

আমার 2 সেন্ট এখানে যুক্ত করা হচ্ছে: মনে হচ্ছে IE8 (এবং নীচে, আমি ধরে নিই), একটি ক্লিক ডাউন এবং একটি ক্লিকের রিলিজের মধ্যে পার্থক্য রাখে ... এবং আমরা এই পৃষ্ঠায় আসার কারণ এটি ক্লিকের পরিবর্তে ক্লিক ক্লিক করে গুলি চালায় because মুক্তি. দেখে মনে হচ্ছে চেকবক্সগুলি কেবল একটি ক্লিক রিলিজে সক্রিয় হয় - নীচে ক্লিক করে এবং তারপরে মাউস সরিয়ে নেওয়া একটি ক্লিক নিবন্ধন করে তবে একটি চেকবক্স পরিবর্তন করে না।

— dah97765

দেখে মনে হচ্ছে কী-বোর্ড নেভিগেশনের মাধ্যমে চেকবক্সটি টগল করা হয়েছে ( tab+ space) onclickহ্যান্ডলারটিও ট্রিগার করবে (কমপক্ষে ক্রমে 51 এ যাচাই করা হয়েছে)।

— নেট হুইটেকার

কীভাবে ক্লিক করলে সেই চেকবক্সের মান পাবেন ??

— ব্যবহারকারী 7350714

Answer 2

React.js এর জন্য, আপনি আরও পঠনযোগ্য কোডের সাহায্যে এটি করতে পারেন। আশা করি এটা সাহায্য করবে.

handleCheckboxChange(e) {
  console.log('value of checkbox : ', e.target.checked);
}
render() {
  return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}

Answer 3

এটা ব্যবহার কর

<input type="checkbox" onclick="onClickHandler()" id="box" />

<script>
function onClickHandler(){
    var chk=document.getElementById("box").value;

    //use this value

}
</script>