JQuery এ, আমি কীভাবে কোনও উপাদানটির নাম বৈশিষ্ট্য অনুসারে নির্বাচন করব?


328

আমার ওয়েব পৃষ্ঠায় 3 টি রেডিও বোতাম রয়েছে, নীচের মত:

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

JQuery এ, এই তিনটির যে কোনও একটিতে ক্লিক করা হলে আমি নির্বাচিত রেডিও বোতামটির মান পেতে চাই। JQuery এ আমাদের আইডি (#) এবং ক্লাস (।) সিলেক্টর রয়েছে, তবে আমি যদি নীচে নীচে এর নামে একটি রেডিও বোতামটি খুঁজতে চাই তবে কী হবে?

$("<radiobutton name attribute>").click(function(){});

কীভাবে এই সমস্যাটি সমাধান করবেন আমাকে বলুন।


5
আপনি কঠোরভাবে যেমন ক্ষেত্র তাদের সংশ্লিষ্ট 'ট্যাগ' ট্যাগ মধ্যে অন্তর্ভুক্ত করা হয় যতদিন, 'এর জন্য' অ্যাট্রিবিউট উল্লেখ করার প্রয়োজন হবে না
লুসিয়াস

2
jQuery 1.8 এবং উপরে এটি পরিবর্তন করে .... আমি নীচে ব্যাখ্যা করে একটি উত্তর যুক্ত করেছি।
কেভিন ল্যাব্রেঞ্চ

3
এ 1 আরপুনের উত্তরটি সবচেয়ে ভাল: একটি নন- জিক্যুরি ওয়ান-লাইনার!
রুডি

1
আমার জেএস অ্যাপে রাষ্ট্র বজায় রাখার জন্য একটি রেডিও বোতাম ব্যবহার করেছে। এই থ্রেডটি পরীক্ষা করার আগে এক ঘন্টা ধরে ডিবাগ করা হয়েছে। এটি দেখুন
প্রসন্ত

সরল জেএসে: document.querySelectorAll("input:radio[name=theme]").forEach(function() { this.onclick=function() { var value = this.value; }; });
জেএসে

উত্তর:


339

এটি করা উচিত, এগুলি সমস্ত ডকুমেন্টেশনে রয়েছে , যা এর সাথে খুব মিলের উদাহরণ রয়েছে:

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

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


4
@gargantaun - আপনি যদি রেডিও বোতামে ক্লিক করেন তবে তাতে কী ঘটে?
পাওলো বার্গান্টিনো

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

1
প্রশ্ন অনুসারে এই উত্তরটি সঠিক। বিশ্বব্যাপী দৃষ্টিতে আমরা ক্লেটন এর জবাব চাই।
ক্রিশ

8
JQuery 1.8 এর [type='radio']পরিবর্তে :radioসেই উপায়ের পরিবর্তে jQuery দেশীয় DOM querySelectorAll()পদ্ধতি দ্বারা সরবরাহিত পারফরম্যান্স বৃদ্ধির সুবিধা নিতে পারে ।
অ্যাডাম 18

2
@ পাওলোবার্গান্টিনো উত্তরটি 100% সঠিক কারণ এটি পছন্দসই রেডিও বোতামটি ক্লিক করার পরে মানটি ফেরত দেয় @ @ ক্লেটন রাবেদা উত্তর এটি দেয় না।
আজম আলভী

185

কোন রেডিও বোতামটি চেক করা হয়েছে তা নির্ধারণ করতে, এটি ব্যবহার করে দেখুন:

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

ইভেন্টটি গ্রুপের সমস্ত রেডিও বোতামের জন্য ধরা পড়বে এবং নির্বাচিত বোতামটির মান ভালে রাখা হবে।

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


3
বেস ডন আমি কীভাবে প্রশ্নটি পড়ি, এটি আমার প্রয়োজনীয় উত্তর ছিল। : আমার সমীকরণে আমি কী অনুপস্থিত ছিল তা যাচাই করা হয়েছে। ধন্যবাদ।
HPWD

9
JQuery 1.8 এর [type='radio']পরিবর্তে :radioসেই উপায়ের পরিবর্তে jQuery দেশীয় DOM querySelectorAll()পদ্ধতি দ্বারা সরবরাহিত পারফরম্যান্স বৃদ্ধির সুবিধা নিতে পারে ।
আদম

আমি কোলনের পরে এবং ভুল করে "চেক" করার আগে একটি জায়গা দিয়েছিলাম। সুতরাং দয়া করে নিশ্চিত করুন যে কোনও স্থান নেই।
ধূমপান বানর

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

155
$('input:radio[name=theme]:checked').val();

আমি সহজভাবে এগিয়ে গিয়েছিলাম $("input[name=theme]:checked").val();( :radioঅংশটি বাদ দিয়ে এবং এটি আই, এফ এফ, সাফারি এবং ক্রোমে ভাল কাজ করে বলে মনে হচ্ছে। জেকিউ ভি 1.3 নিয়ে কাজ করতে হয়েছিল ... অবশ্যই, এর অর্থ কেবল 'থিম' নামে একটি উপাদান রয়েছে
morespace54

2
এটিই সেরা উত্তর আইএমও, এটি বলছে "আমাকে এই নামের সাথে চেক করা রেডিওর মান দিন"। ইভেন্ট ইত্যাদির দরকার নেই
প্রোভেগা

39

অন্য উপায়

$('input:radio[name=theme]').filter(":checked").val()

1
আপনি যদি +1 মানটি গ্রহণ করতে আগ্রহী হন তবে
এইটি কার্যকর

এই কঠিন কারণ আপনার, রেডিও বোতাম রাখার যেমন একটি পরিবর্তনশীল ব্যবহার করতে পারেন $themeRadios = $('input:radio[name=theme'])কোন ইভেন্ট হ্যান্ডলার সেট করতে এবং তারপর ফিল্টার, যেমন ব্যবহার করে মান পেতে $themeRadios.filter(":checked").val()
জোশুয়া পিন্টার

আমি এই সমাধান ভালোবাসি।
হাবিল

20

এটি আমার পক্ষে দুর্দান্ত কাজ করে। উদাহরণস্বরূপ আপনার একই "নাম" সহ দুটি রেডিও বোতাম রয়েছে এবং আপনি কেবল চেক করাটির মান পেতে চেয়েছিলেন। আপনি এটি চেষ্টা করতে পারেন।

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

এই উত্তরটি বর্তমানে-গৃহীত 230+ উত্তর উত্তরের চেয়ে ভাল হওয়ার কারণ হ'ল ব্যবহারকারী যখন কীবোর্ডের সাহায্যে রেডিও বোতামটি ব্যবহার করেন তখন এই উত্তরটিরও জন্য অ্যাকাউন্ট রয়েছে।
gmeben

16

নাম অনুসারে নির্বাচিত রেডিও বোতামের মান পেতে নিম্নলিখিত কোডটি ব্যবহৃত হয়

jQuery("input:radio[name=theme]:checked").val();

ধন্যবাদ আদনান


হুম .. আমি কি আপনার শেষ জবাবে আপনার কোড ফর্ম্যাটিংটি ঠিক করেছিলাম? দয়া করে এটি নিজের যত্ন নিন :-)
ক্লিওপাত্র

13

আমি jQuery এর 1.7.2 থেকে 1.8.2 এ উন্নীত করার পরে আমি একটি ত্রুটি নিয়ে গবেষণা করার সময় এই প্রশ্নটি পেয়েছি। আমি আমার উত্তর যুক্ত করছি কারণ jQuery 1.8 এবং এর চেয়েও বেশি পরিবর্তন হয়েছে যা এই প্রশ্নের উত্তর এখন কীভাবে দেওয়া হয় তা পরিবর্তন করে।

JQuery 1.8 এর সাথে তারা হ্রাস পেয়েছে ছদ্ম-নির্বাচকদের যেমন: রেডিও,: চেকবক্স,: পাঠ্যকে অবমূল্যায়ন করেছে।

উপরে কাজের জন্য এখন শুধু প্রতিস্থাপন :radioসঙ্গে[type=radio]

সুতরাং আপনার উত্তরটি এখন jQuery 1.8 এবং তারপরের সমস্ত সংস্করণের জন্য হয়ে যায়:

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
}); 

আপনি এই পরিবর্তনটির জন্য 1.8 রেডমি এবং নির্দিষ্ট টিকিটের পরিবর্তনের পাশাপাশি অতিরিক্ত তথ্য বিভাগের আওতায় রেডিও নির্বাচনকারী পৃষ্ঠাতে কেন তা বুঝতে পারবেন ।


5
: চেক করা অবহেলা করা হয় না। সুতরাং আপনি ব্যবহার করতে পারেন$("input[type='radio'][name='theme']:checked")
অ্যাডাম

12

যে কেউ লাইব্রেরি অন্তর্ভুক্ত করতে চান না তাদের জন্য খুব সাধারণ কিছু করার জন্য:

document.querySelector('[name="theme"]:checked').value;

jsfiddle

বর্তমানের উত্তরগুলির কার্য সম্পাদনের জন্য এখানে পরীক্ষা করুন


1
এই উত্তরের জন্য ধন্যবাদ। কারণ আমি কোনও রূপে কাজের স্বীকৃত উত্তর পেতে অক্ষম।
ক্রিস হোমস

9

আপনি যদি ক্লিক ইভেন্টের আগে ডিফল্ট নির্বাচিত রেডিও বোতামের মান জানতে চান তবে এটি চেষ্টা করুন:

সতর্কতা ($ ( "ইনপুট: রেডিও: চেক করা"।) Val ());

6

নীচের মতো পৃষ্ঠাটিতে যদি আপনার একাধিক রেডিও গোষ্ঠী থাকে তবে আপনি ফিল্টার ফাংশনটি ব্যবহার করতে পারেন

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

এখানে ফিডল ইউআরএল

http://jsfiddle.net/h6ye7/67/


4
<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

4

আপনি যদি সত্য / মিথ্যা মান চান তবে এটি ব্যবহার করুন:

  $("input:radio[name=theme]").is(":checked")

3

এরকম কিছু হতে পারে?

$("input:radio[name=theme]").click(function() { 
 ...
}); 

আপনি যখন কোনও রেডিও বোতামে ক্লিক করেন, আমি বিশ্বাস করি এটি নির্বাচিত হয়ে যাবে, সুতরাং এটি নির্বাচিত রেডিও বোতামটির জন্য ডাকা হবে।


1
@ JQuery 1.3 হিসাবে অবৈধ (এর আগে, এমনকি অবমানিত)। blog.jquery.com/2009/01/05/help-test-jquery-13-beta-2 "ওল্ড, এক্সপ্যাথ, স্টাইল অ্যাট্রিবিউট সিলেক্টর: [@ অ্যাটার = মান]। এগুলি বেশ কিছু সময়ের জন্য অবচিত করা হয়েছে - এবং আমরা অবশেষে এগুলি অপসারণ করছেন it এটি ঠিক করতে কেবল @ সরান! "
রেসারার

3

আমার কাছে একই পৃষ্ঠায় একাধিক গ্রুপের রেডিও বোতাম রয়েছে আপনি রেডিও বোতামের মান পেতে এটি চেষ্টা করতে পারেন:

$("input:radio[type=radio]").click(function() {
    var value = $(this).val();
    alert(value);
});

চিয়ার্স!


2

রেডিও বোতামগুলির পরিসীমা নির্ধারণ করতে এবং তারপর মান নির্ধারণের জন্য নিম্নলিখিত ব্যবহার করে একটি সিএসএস শ্রেণি ব্যবহার করতে পারেন

$('.radio_check:checked').val()

1

এটি আমার পক্ষে কাজ করেছে ..

এইচটিএমএল:

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

jQuery:

    $ ("। রেডিওক্লাস") প্রতিটি (ফাংশন () {
        যদি ($ (এই) .is ( ': চেক করা'))
        সতর্কতা ($ (এই) .val ());
    });

আশা করি এটা সাহায্য করবে..



0

আপনি ASP.NET RadioButtonনিয়ন্ত্রণের মান পেতে শ্রেণি নির্বাচক ব্যবহার করে লক্ষ্য করতে পারেন যে সর্বদা খালি থাকে এবং এর কারণ এখানে।

আপনি নীচের মত RadioButtonনিয়ন্ত্রণ তৈরি করুন ASP.NET:

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

এবং ASP.NETআপনার জন্য নিম্নলিখিত এইচটিএমএল রেন্ডার করেRadioButton

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

কারণ ASP.NETআমরা RadioButtonনিয়ন্ত্রণের নাম বা আইডি ব্যবহার করতে চাই না কারণ তারা উপরের কোডে দেখতে পাওয়ায় তারা ব্যবহারকারীর হাত থেকে কোনও কারণেই (ধারকের নাম, ফর্মের নাম, ব্যবহারকারীর নিয়ন্ত্রণের নাম, ...) পরিবর্তন করতে পারে।

একমাত্র অবশিষ্ট সম্ভবপর উপায় মান পেতে RadioButtonjQuery ব্যবহার যেমন উল্লেখ CSS বর্গ ব্যবহার করছে এই একটি সম্পূর্ণ সম্পর্কহীন প্রশ্নের উত্তর নিম্নলিখিত হিসাবে

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.