রেডিও বোতামের জন্য অন চেঞ্জ ইভেন্ট হ্যান্ডলার (INPUT টাইপ = "রেডিও") এক মান হিসাবে কাজ করে না

190

আমি এর জন্য একটি সাধারণ সমাধান খুঁজছি।

একই নামে 2 টি রেডিও টাইপ ইনপুট বিবেচনা করুন। জমা দেওয়া হলে, যাচাই করা হয় তা ফর্মের সাথে প্রেরণ করা মূল্য নির্ধারণ করে:

<input type="radio" name="myRadios" onchange="handleChange1();" value="1" />
<input type="radio" name="myRadios" onchange="handleChange2();" value="2" />

কোনও রেডিও বোতামটি ডি-সিলেক্ট করা হলে পরিবর্তনের ইভেন্টটি আগুন দেয় না। সুতরাং যদি মান = "1" সহ রেডিওটি ইতিমধ্যে নির্বাচিত হয় এবং ব্যবহারকারী দ্বিতীয়টি নির্বাচন করে, হ্যান্ডেল চ্যাঞ্জ 1 () চালিত হয় না। এটি একটি সমস্যা উপস্থাপন করে (যাই হোক আমার জন্য) এতে কোনও ইভেন্ট নেই যেখানে আমি এই ডি-সিলেকশনটি ধরতে পারি।

আমি যা চাই তা হ'ল চেকবক্স গোষ্ঠীর মান বা বিকল্প হিসাবে একটি অন্বেস ইভেন্ট যা অন্বেষণ ইভেন্টের জন্য কেবলমাত্র রেডিও চেক করা হয় তা নয়, তা যখন এটি চেক করা হয় না তা সনাক্ত করে।

আমি নিশ্চিত আপনারা কেউ কেউ এর আগে এই সমস্যায় পড়েছেন। কিছু কাজের ক্ষেত্রগুলি কী কী (বা আদর্শভাবে এটি পরিচালনা করার সঠিক উপায় কী)? আমি কেবল পরিবর্তন ইভেন্টটি ধরতে চাইছি, আগের চেক করা রেডিওর পাশাপাশি নতুন চেক করা রেডিওটিও অ্যাক্সেস করতে পারি।

পিএস
অনক্লিকটি কোনও রেডিও চেক করা আছে তা নির্দেশ করার জন্য একটি আরও ভাল (ক্রস ব্রাউজার) ইভেন্টের মতো মনে হচ্ছে তবে এটি এখনও চেক না হওয়া সমস্যার সমাধান করে না।

আমি মনে করি যে এটি একটি চেকবক্স প্রকারের জন্য কেন এই জাতীয় ক্ষেত্রে কাজ করে, কারণ এটি যখন আপনি এটি পরীক্ষা করে বা আন-চেক করেন তখন এটি যে মূল্য জমা দেয় তা পরিবর্তন করে sense আমি আশা করি রেডিও বোতামগুলি আরও একটি নির্বাচনী উপাদানটির পরিবর্তনের মতো আচরণ করত তবে আপনি কী করতে পারেন ...

javascript html cross-browser

— ম্যাথু
সূত্র

179

var rad = document.myForm.myRadios;
var prev = null;
for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}

<form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form>

স্নিপেট প্রসারিত করুন

এখানে একটি জেএসফিডাল ডেমো: https://jsfiddle.net/crp6em1z/

— মাইকেল
সূত্র

4

আমি কেন এটি সঠিক উত্তর হিসাবে বেছে নিয়েছি তার একটি নোট: ক্লিক করুন ইভেন্ট হ্যান্ডলারগুলি বর্তমানে নির্বাচিত রেডিওতে myRadiosথাকা ভেরিয়েবলটি পড়ার জন্য নামের বৈশিষ্ট্য সহ প্রতিটি রেডিও বোতামে সেট করা হয় are prevক্লিক করা রেডিও যে কোনও সঞ্চিত আছে prevএবং যদি না হয় তবে বর্তমানে ক্লিক করা রেডিও সেখানে সংরক্ষণ করা আছে কিনা তা নির্ধারণের জন্য প্রতিটি ক্লিক হ্যান্ডলারের মধ্যে একটি তুলনা করা হয় । ক্লিক হ্যান্ডলারের মধ্যে আপনার পূর্বে নির্বাচিত: prevএবং বর্তমানে নির্বাচিত রেডিওতে অ্যাক্সেস রয়েছে :this

— ম্যাথু

26

লুপের বাইরে ফাংশনটি ক্যাশে করা ভাল হবে, যাতে সমস্ত রেডিও একই ইভেন্ট হ্যান্ডলার ভাগ করে নেয় (এখন তাদের অভিন্ন হ্যান্ডলার রয়েছে তবে তারা বিভিন্ন ফাংশন)। অথবা সমস্ত রেডিওগুলি একটি মোড়কের ভিতরে রেখে ইভেন্টের প্রতিনিধি ব্যবহার করতে পারেন

— ওরিওল

1

@ অরিওল, বা যে কোনও জ্ঞানী, আপনি কি (1) লুপের বাইরে ক্যাশে বা (2) মোড়ক + ইভেন্ট প্রতিনিধি হিসাবে একটি উদাহরণ দিতে পারেন?

— ম্যাট ভোদা

10

@ ম্যাটভোদা অপ্টিমাইজেশন ছাড়াই । ইভেন্ট শ্রোতা ভাগ করে নিচ্ছি । ইভেন্ট প্রতিনিধি দলের সাথে

— ওরিওল

14

অনক্লিক কীবোর্ড নির্বাচনের সাথে কাজ করে না, আপনি ব্যবহার করতে পারেন rad[i].addEventListener('change', function(){ //your handler code })এবং এটি উভয় মাউস এবং কীবোর্ডের জন্য কাজ করবে

— জুয়ানমি রদ্রিগেজ

117

আমি দুটি পরিবর্তন করব:

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

onclickপরিবর্তে হ্যান্ডলারটি ব্যবহার করুন onchange- আপনি রেডিও ইনপুটটির "চেক করা রাষ্ট্র" পরিবর্তন করছেন, না value, তাই কোনও পরিবর্তন ইভেন্ট হচ্ছে না।
একটি একক ফাংশন ব্যবহার করুন এবং thisপ্যারামিটার হিসাবে পাস করুন, এটি বর্তমানে কোন মানটি নির্বাচন করেছে তা পরীক্ষা করা সহজ করে তুলবে।

ইটিএ: আপনার handleClick()ফাংশনের পাশাপাশি , আপনি পৃষ্ঠা-স্কোপড ভেরিয়েবলে রেডিওর আসল / পুরানো মানটি ট্র্যাক করতে পারেন। এটাই:

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

var currentValue = 0;
function handleClick(myRadio) {
    alert('Old value: ' + currentValue);
    alert('New value: ' + myRadio.value);
    currentValue = myRadio.value;
}

<input type="radio" name="myRadios" onclick="handleClick(this);" value="1" />
<input type="radio" name="myRadios" onclick="handleClick(this);" value="2" />

স্নিপেট প্রসারিত করুন

— নেট কুক
সূত্র

ধন্যবাদ, যদিও এটি পূর্ববর্তী চেক করা রেডিও পাওয়ার বিষয়টি বিবেচনা করে না এবং আপনি অন্য ব্যবহারকারীরা ইতিমধ্যে উল্লেখ করেছেন যে "অনক্লিক" এর পরিবর্তে "অনক্লিক" ব্যবহার করা উচিত। আমি আসলে এটিকে প্রথম থেকেই জানতাম তবে আমি এদিকে দৃষ্টি আকর্ষণ করতে চাই যে অন্বেষণ কারওর প্রত্যাশার মতো কাজ করে না এবং আমি এটি আরও ভালভাবে পরিচালনা করতে চাই।

— ম্যাথু

1

আপনি জাভাস্ক্রিপ্ট ব্যবহার করছেন, তাই না? তাহলে কেন কেবলমাত্র এমন একটি পরিবর্তনশীল বজায় রাখবেন না যা সর্বশেষ পরিচিত নির্বাচিত রেডিও বোতামটি সঞ্চয় করে? আপনি যদি কোনও একক হ্যান্ডলার ব্যবহার করে থাকেন তবে নতুন মান দিয়ে ওভাররাইট করার আগে আপনি এই সঞ্চিত মানটি পরীক্ষা করতে পারেন। +1

— jmort253

13

@ ম্যাথিউ: onclickহ্যান্ডলারের সবেমাত্র নামকরণ করা হয়েছে - এটি কীবোর্ডে "এন্টার" চাপ দিয়ে বোতামটি ক্লিক করা, স্পর্শ করা বা সক্রিয় করা আছে কিনা তা রেডিও বোতাম নির্বাচনের ইভেন্ট পরিচালনা করে। onchangeএই ক্ষেত্রে হ্যান্ডলারটি উপযুক্ত নয় কারণ ইনপুটটির মান পরিবর্তন হয় না, কেবলমাত্র চেক / চেক করা অ্যাট্রিবিউট। পূর্ববর্তী মানটি সম্বোধন করতে আমি একটি উদাহরণ স্ক্রিপ্ট যুক্ত করেছি।

— নাট কুক

1

যদি ব্যবহারকারী রেডিও নির্বাচন করতে কীবোর্ড (ট্যাব + স্পেসবার) ব্যবহার করে (এবং এটি বড় আকারের মধ্যে সাধারণ অভ্যাস) তবে ইভেন্টটি পরিচালনা করবে না on

— হোল্ডঅফহ্যাঞ্জার

+1 টি। "অন চেঞ্জ ()" রিঅ্যাকটিজেএস-এ আগুনের মতো ঘটনা নয় এবং এটিই একমাত্র সমাধান। সূত্র: github.com/facebook/react/issues/1471

— হোল্ডঅফহাঙ্গার

42

যেমন আপনি এই উদাহরণ থেকে দেখতে পারেন: http://jsfiddle.net/UTwGS/

এইচটিএমএল:

<label><input type="radio" value="1" name="my-radio">Radio One</label>
<label><input type="radio" value="2" name="my-radio">Radio One</label>

JQuery:

$('input[type="radio"]').on('click change', function(e) {
    console.log(e.type);
});

কোনও রেডিও বোতাম অপশন (কমপক্ষে কিছু ব্রাউজারে) বাছাই করার সময় উভয়ই clickএবং changeইভেন্টগুলি গুলি করা হয়।

আমার এটিও উল্লেখ করা উচিত যে আমার উদাহরণে clickইভেন্টটি এখনও চালিত হয় যখন আপনি কোনও বিকল্প নির্বাচন করতে ট্যাব এবং কীবোর্ড ব্যবহার করেন।

সুতরাং, আমার বক্তব্যটি হ'ল changeইভেন্টটি চালিত হওয়া সত্ত্বেও কিছু ব্রাউজার হলেও clickইভেন্টটি আপনার প্রয়োজনীয় কভারেজ সরবরাহ করবে।

— ফিলিপ ওয়ালটন
সূত্র

6

হ্যাঁ, কারণ console.logআমার কোডে একটি বিবৃতি রয়েছে, যা আই 7 সমর্থন করে না। আপনি চাইলে আপনি কেবলমাত্র এটিতে সতর্ক করতে পারেন।

— ফিলিপ ওয়ালটন

ধন্যবাদ। এটি পূর্বে নির্বাচিত চেকবক্সটি কীভাবে পাবেন তা ঠিক করে না। এছাড়াও ধন্যবাদ, আমি জানতাম না কনসোল.লগ আইই তে কাজ করে না।

— ম্যাথু

ইভেন্ট হ্যান্ডলারগুলিকে দ্বিগুণ করবেন না - ব্রাউজারগুলিতে যা ইভেন্ট clickএবং changeইভেন্ট হ্যান্ডলার উভয়কেই আগুন ধরিয়ে দেয় , আপনি হ্যান্ডলারটিকে দু'বার কল করবেন। এই ক্ষেত্রে, @ ম্যাথু যেহেতু পূর্বের মান নিয়ে উদ্বিগ্ন, তাই খারাপ পরিণতি হতে পারে।

— নাট কুক

3

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

— ফিলিপ ওয়ালটন

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

— নাট কুক

10

জ্যাকুরির পরিবর্তন ইভেন্টটি ব্যবহার সম্পর্কে কী?

$(function() {
    $('input:radio[name="myRadios"]').change(function() {
        if ($(this).val() == '1') {
            alert("You selected the first option and deselected the second one");
        } else {
            alert("You selected the second option and deselected the first one");
        }
    });
});

জেএসফিডাল: http://jsfiddle.net/f8233x20/

— রাজন পল
সূত্র

$(this).val()নেটিভ জাভাস্ক্রিপ্টের সাথেও প্রতিস্থাপন করা যেতে পারে e.currentTarget.value, যেখানে ই ইভেন্ট কল্পনাটি কলব্যাক ফাংশনটির মধ্য দিয়ে গেছে।

— এরিক

6

যেমন আপনি এখানে দেখতে পাচ্ছেন: http://www.w3schools.com/jsref/event_onchange.asp অনূদর্শন বৈশিষ্ট্যটি রেডিও বোতামগুলির জন্য সমর্থিত নয়।

আপনার দ্বারা লিঙ্কিত প্রথম SO প্রশ্নের উত্তর আপনাকে দেয়: onclickপরিবর্তে ইভেন্টটি ব্যবহার করুন এবং এটি যে ক্রিয়াকলাপটি ঘটায় তার ভিতরে রেডিও বোতামের অবস্থাটি পরীক্ষা করুন।

— কনস্ট্যান্টিন গ্রো
সূত্র

এটি কিছুটা অসম্পূর্ণ। সুতরাং, গোষ্ঠীর সমস্ত ক্লিকগুলি পরিচালনা করার জন্য একটি ফাংশন তৈরি করার পরে, কোনটি নির্বাচিত হয়েছে তা আপনি কীভাবে পরীক্ষা করবেন? এছাড়াও, আমি একটি নন-জিকুরি সমাধানের সন্ধান করছি।

— ম্যাথু

ক্লিক করা রেডিও বোতামটি চেক করা হবে, একই গ্রুপের সমস্ত অন্যদের চেক করা হবে না। অথবা, আপনি that গোষ্ঠীর সমস্ত রেডিও বোতাম লুপ করে তাদের স্থিতি পরীক্ষা করতে পারেন। আপনি যদি রেডিও বোতামগুলির সাথে কী করতে চান সে সম্পর্কে আরও তথ্য সরবরাহ করেন তবে কীভাবে চলবেন তা আপনাকে বলা সহজ।

— কনস্ট্যান্টিন গ্রো

2

onclickএকই শব্দার্থক নয়, কারণ আপনি কীবোর্ড ফর্ম নির্বাচন সক্ষম করে দেওয়া কিবোর্ড ইনপুট দিয়ে একটি রেডিও বোতামের চেকনেস পরিবর্তন করতে পারেন।

— gsnedders

@gsnedders অনক্লিক বেশিরভাগ ব্রাউজারগুলিতে কীবোর্ড ইনপুট মাধ্যমে কাজ করছে বলে মনে হচ্ছে - ফায়ারফক্স, আইই, সাফারি, ক্রোম। এটি উদ্ভট যে এটি অন্বেষণের যা করার কথা ছিল তা করে, তবে তা করে। আমি উত্সাহী যদিও এটি মোবাইল প্ল্যাটফর্মগুলিতে কীভাবে কাজ করে।

— ম্যাথু

1

1 এর জন্য ডাব্লু 3 স্কুলগুলি এবং 2 এর পুরো সমস্যাটির সমাধান করেনি যা পূর্বে নির্বাচিত রেডিও পেতে কীভাবে ছিল। 2 আমার মনে প্রশ্নের সবচেয়ে গুরুত্বপূর্ণ অংশ ছিল।

— ম্যাথু

6

আমি মনে করি না পূর্ববর্তী স্থিতি সংরক্ষণের পরে আর কোনও উপায় আছে। এখানে jQuery সহ সমাধান

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">
    var lastSelected;
    $(function () {
        //if you have any radio selected by default
        lastSelected = $('[name="myRadios"]:checked').val();
    });
    $(document).on('click', '[name="myRadios"]', function () {
        if (lastSelected != $(this).val() && typeof lastSelected != "undefined") {
            alert("radio box with value " + $('[name="myRadios"][value="' + lastSelected + '"]').val() + " was deselected");
        }
        lastSelected = $(this).val();
    });
</script>

<input type="radio" name="myRadios" value="1" />
<input type="radio" name="myRadios" value="2" />
<input type="radio" name="myRadios" value="3" />
<input type="radio" name="myRadios" value="4" />
<input type="radio" name="myRadios" value="5" />

আরও কিছুটা চিন্তা করার পরে, আমি ভেরিয়েবলটি থেকে মুক্তি এবং ক্লাস যুক্ত / অপসারণের সিদ্ধান্ত নিয়েছি। আমি যা পেয়েছি তা এখানে: http://jsfiddle.net/BeQh3/2/

— অ্যালেক্স ওকরুশকো
সূত্র

1

আমি jQuery ব্যবহার সম্পর্কে ভেবেছিলাম এবং অবশ্যই এটির সাথে আরও অনেক কিছু করা যেতে পারে। আপনি কিছু কাস্টম ইভেন্টগুলি চেকড এবং চেক না করা এবং এমনকি ক্রস ব্রাউজার quirks জন্য চেক করতে বাঁধতে পারে। একটি প্লাগইন জন্য ভাল ধারণা মত শোনাচ্ছে।

— ম্যাথু

ধন্যবাদ। আমি jQuery পছন্দ করি তবে এই ক্ষেত্রে এটি আমার কাছে অনুপলব্ধ।

— ম্যাথু

কীভাবে আপনার জন্য jQuery অনুপলব্ধ?

— jmort253

1

যদি jQuery আমার কাছে অনুপলব্ধ থাকত তবে আমি অন্য একটি চাকরি খুঁজে পেতাম।

— অ্যাড্রিয়ান কার

5

হ্যাঁ বর্তমানে নির্বাচিত রেডিও বোতামটির জন্য কোনও পরিবর্তন ইভেন্ট নেই। তবে সমস্যাটি তখন যখন প্রতিটি রেডিও বোতাম একটি পৃথক উপাদান হিসাবে নেওয়া হয়। পরিবর্তে একটি রেডিও গ্রুপ যেমন একটি একক উপাদান হিসাবে বিবেচনা করা উচিত select। সুতরাং পরিবর্তন ইভেন্টটি এই গোষ্ঠীর জন্য ট্রিগার করা হয়েছে। যদি এটি একটি selectউপাদান হয় তবে আমরা এটির প্রতিটি বিকল্প সম্পর্কে কখনই চিন্তা করি না, তবে কেবলমাত্র নির্বাচিত বিকল্পটি গ্রহণ করি। আমরা একটি চলকতে বর্তমান মান সংরক্ষণ করি যা একটি নতুন বিকল্প নির্বাচন করা হলে পূর্বের মান হয়ে যাবে। একইভাবে আপনাকে চেক করা রেডিও বোতামের মান সংরক্ষণের জন্য একটি পৃথক ভেরিয়েবল ব্যবহার করতে হবে।

আপনি যদি পূর্ববর্তী রেডিও বোতামটি সনাক্ত করতে চান তবে আপনাকে mousedownইভেন্টটি লুপ করতে হবে ।

var radios = document.getElementsByName("myRadios");
var val;
for(var i = 0; i < radios.length; i++){
    if(radios[i].checked){
        val = radios[i].value;
    }
}

এটি দেখুন: http://jsfiddle.net/diode/tywx6/2/

— ডিত্তড
সূত্র

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

— ম্যাথু

5

পূর্ববর্তী চেক করা রেডিওটি একটি ভেরিয়েবলে সঞ্চয় করুন:
http://jsfiddle.net/dsbonev/C5S4B/

এইচটিএমএল

<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2
<input type="radio" name="myRadios" value="3" /> 3
<input type="radio" name="myRadios" value="4" /> 4
<input type="radio" name="myRadios" value="5" /> 5

জাতীয়

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        //using radio elements previousCheckedRadio and currentCheckedRadio

        //storing radio element for using in future 'change' event handler
        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

জেএস উদাহরণ কোড

var changeHandler = (function initChangeHandler() {
    var previousCheckedRadio = null;

    function logInfo(info) {
        if (!console || !console.log) return;

        console.log(info);
    }

    function logPrevious(element) {
        if (!element) return;

        var message = element.value + ' was unchecked';

        logInfo(message);
    }

    function logCurrent(element) {
        if (!element) return;

        var message = element.value + ' is checked';

        logInfo(message);
    }

    var result = function (event) {
        var currentCheckedRadio = event.target;
        var name = currentCheckedRadio.name;

        if (name !== 'myRadios') return;

        logPrevious(previousCheckedRadio);
        logCurrent(currentCheckedRadio);

        previousCheckedRadio = currentCheckedRadio;
    };

    return result;
})();

document.addEventListener('change', changeHandler, false);

— দিমিতর বোনেভ
সূত্র

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

— ম্যাথু

@ ম্যাথিউ আসলে আমি যে ফ্লোলটি ভাগ করেছি তা হ'ল রেডিওর উপাদান সংরক্ষণ করছিল কেবল মূল্য নয়। কোডটির উদ্দেশ্য দেখানোর জন্য মানটি লগ করা হয়েছিল তবে এটি পরবর্তী ব্যবহারের জন্য সংরক্ষণ করা হয়নি। আমি আরও স্পষ্ট হয়ে ওঠার নামগুলি সম্পাদনা করছি: পূর্ববর্তী চেকড -> পূর্ববর্তী চেকড্র্যাডিয়ো, যে -> বর্তমানচেকডের্যাডিয়ো;

— দিমিতর বোনেভ

ধন্যবাদ। ক্রস ব্রাউজারটি সঠিকভাবে আচরণ করে না এমন পরিবর্তন ইভেন্টটি ব্যবহার ব্যতীত এটি একটি ভাল সমাধান। আপনি যদি পরিবর্তে ক্লিক ব্যবহার করেন তবে এটি আরও ভাল।

— ম্যাথু

5

আমি বুঝতে পারি এটি একটি পুরানো সমস্যা, তবে কোডের এই স্নিপেটটি আমার পক্ষে কাজ করে। ভবিষ্যতে কেউ এটি দরকারী হিসাবে খুঁজে পেতে হবে:

<h2>Testing radio functionality</h2>
<script type="text/javascript">var radioArray=[null];</script>
<input name="juju" value="button1" type="radio" onclick="radioChange('juju','button1',radioArray);" />Button 1
<input name="juju" value="button2" type="radio" onclick="radioChange('juju','button2',radioArray);" />Button 2
<input name="juju" value="button3" type="radio" onclick="radioChange('juju','button3',radioArray);" />Button 3
<br />

<script type="text/javascript">
function radioChange(radioSet,radioButton,radioArray)
  {
  //if(radioArray instanceof Array) {alert('Array Passed');}
  var oldButton=radioArray[0];
  if(radioArray[0] == null)
    {
    alert('Old button was not defined');
    radioArray[0]=radioButton;
    }
  else
    {
    alert('Old button was set to ' + oldButton);
    radioArray[0]=radioButton;
    }
  alert('New button is set to ' + radioArray[0]);
  }
</script>

— জন কে
সূত্র

1

আপনি যুক্ত onkeydown="radioChange('juju','button1',radioArray);"করলে কোনও ব্যবহারকারী রেডিও চেক করার জন্য স্থান ব্যবহার করলে আপনি ক্যাপচার করতে পারেন।

— ম্যাথু

2

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

— অ্যান্ড্রু ল্যাথাম
সূত্র

2

<input type="radio" name="brd" onclick="javascript:brd();" value="IN">   
<input type="radio" name="brd" onclick="javascript:brd();" value="EX">` 
<script type="text/javascript">
  function brd() {alert($('[name="brd"]:checked').val());}
</script>

— উমেশ অন্নিকৃষ্ণান
সূত্র

2

আপনি যদি ইনলাইন স্ক্রিপ্ট এড়াতে চান, আপনি কেবল রেডিওতে ক্লিক ইভেন্টের জন্য শুনতে পারেন। এটি ক্লিকের ইভেন্টটি শুনে প্লেইন জাভাস্ক্রিপ্টের মাধ্যমে অর্জন করা যেতে পারে

for (var radioCounter = 0 ; radioCounter < document.getElementsByName('myRadios').length; radioCounter++) {
      document.getElementsByName('myRadios')[radioCounter].onclick = function() {
        //VALUE OF THE CLICKED RADIO ELEMENT
        console.log('this : ',this.value);
      }
}

— mareks
সূত্র

2

আপনি নিম্নলিখিত জেএস স্ক্রিপ্ট যোগ করতে পারেন

<script>
    function myfunction(event) {
        alert('Checked radio with ID = ' + event.target.id);
    }
    document.querySelectorAll("input[name='gun']").forEach((input) => {
        input.addEventListener('change', myfunction);
    });
</script>

— গুঁজন
সূত্র

1

এটা আমার জন্য কাজ করে

<input ID="TIPO_INST-0" Name="TIPO_INST" Type="Radio" value="UNAM" onchange="convenio_unam();">UNAM

<script type="text/javascript">
            function convenio_unam(){
                if(this.document.getElementById('TIPO_INST-0').checked){
                    $("#convenio_unam").hide();
                }else{
                    $("#convenio_unam").show(); 
                }                               
            }
</script>

— Doberon
সূত্র

আমি মনে করি এটি এখনই উত্তর হওয়া উচিত যা এটি সমর্থিত।

— লিও

0

এটি চেক = মিথ্যাতে যতগুলি বোতাম চান তত ব্যবহার করতে এটি সবচেয়ে সহজ এবং সর্বাধিক কার্যকর ফাংশন এবং এই ফাংশনটিতে প্রতিটি রেডিওর অনক্লিক ইভেন্ট তৈরি করে। প্রতিটি রেডিও বোতামে একটি অনন্য নম্বর নির্ধারণ করুন

function AdjustRadios(which) 
{
    if(which==1)
         document.getElementById("rdpPrivate").checked=false;
    else if(which==2)
         document.getElementById("rdbPublic").checked=false;
}

— জামে
সূত্র

0

সবচেয়ে সহজ এবং শক্তিশালী পুরো উপায়

getAttribute ব্যবহার করে কেবল রেডিও ইনপুট পড়ুন

document.addEventListener('input',(e)=>{

if(e.target.getAttribute('name')=="myRadios")
console.log(e.target.value)
})

<input type="text"  value="iam text" /> 
<input type="radio" name="myRadios" value="1" /> 1
<input type="radio" name="myRadios" value="2" /> 2

স্নিপেট প্রসারিত করুন

— ßãlãjî
সূত্র