javascript - bootstrap - radio button html selected




في jQuery ، كيف أختار عنصرًا باسم سمة الاسم الخاص به؟ (12)

إذا كنت ترغب في معرفة قيمة زر الاختيار المحدد الافتراضي قبل حدث النقر ، فجرّب ذلك:

alert($("input:radio:checked").val());

لدي 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 لدينا محددات (#) و class (.) ، ولكن ماذا لو كنت أرغب في العثور على زر راديو باسمه ، كما هو موضح أدناه؟

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

من فضلك قل لي كيف لحل هذه المشكلة.


إذا كنت تريد قيمة true / false ، فاستخدم هذا:

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

طريق اخر

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

قد تلاحظ استخدام محدد الفئة للحصول على قيمة عناصر تحكم ASP.NET RadioButton تكون فارغة دائمًا وهنا السبب.

يمكنك إنشاء 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 التالية HTML 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 التحكم RadioButton لأنه يمكن تغييره لأي سبب خارج يد المستخدم (التغيير في اسم الحاوية ، اسم النموذج ، اسم usercontrol ، ...) كما يمكنك رؤيتها في الكود أعلاه .

الطريقة الوحيدة المتبقية الممكنة للحصول على قيمة RadioButton باستخدام jQuery تستخدم فئة css كما هو مذكور في this الإجابة على سؤال غير مرتبط تمامًا كما يلي

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});

لتحديد زر الاختيار المحدد ، حاول القيام بما يلي:

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

سيتم اكتشاف الحدث لجميع أزرار الاختيار في المجموعة وسيتم وضع قيمة الزر المحدد في val.

تحديث: بعد النشر ، قررت أن إجابة باولو أعلاه أفضل ، نظرًا لأنها تستخدم واحدة تقاطع DOM أقل. سأترك هذه الإجابة لأنها تعرض كيفية الحصول على العنصر المحدد بطريقة متوافقة مع المتصفحات.


لديّ أكثر من مجموعة من أزرار الاختيار في نفس الصفحة ، يمكنك أيضًا تجربة ذلك للحصول على قيمة زر الاختيار:

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

في صحتك!


هذا العمل بالنسبة لي ..

HTML:

<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/>

مسج:

    $(".radioClass").each(function() {
        if($(this).is(':checked'))
        alert($(this).val());
    });

آمل أن يساعد ..


هذا يجب أن يفعل ذلك ، كل هذا موجود في documentation ، التي لديها مثال مشابه جدًا لذلك:

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

يجب أن أشير أيضًا إلى أن لديك معرّفات متطابقة متعددة في ذلك المقتطف. هذا هو HTML غير صالح. استخدم الفئات لتجميع مجموعة من العناصر ، وليس معرفات ، حيث يجب أن تكون فريدة.


يتم استخدام التعليمة البرمجية التالية للحصول على قيمة زر التحديد المحدد حسب الاسم

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

شكرا عدنان


يمكن أيضًا استخدام فئة CSS لتحديد نطاق أزرار الاختيار ، ثم استخدام ما يلي لتحديد القيمة

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

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

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




radio-button