ใน jQuery ฉันจะเลือกองค์ประกอบด้วยแอตทริบิวต์ชื่อได้อย่างไร

ฉันมีปุ่มตัวเลือก 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 เรามี id (#) และตัวเลือก class (.) แต่ถ้าฉันต้องการหาปุ่มตัวเลือกโดยใช้ชื่อดังต่อไปนี้

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

โปรดบอกวิธีแก้ปัญหานี้

สิ่งนี้ควรทำทั้งหมดนี้อยู่ในเอกสารซึ่งมีตัวอย่างที่คล้ายคลึงกันนี้:

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

ฉันควรทราบว่าคุณมีรหัสที่เหมือนกันหลายรายการในตัวอย่างนั้น นี่คือ HTML ที่ไม่ถูกต้อง ใช้คลาสเพื่อชุดกลุ่มขององค์ประกอบไม่ใช่ ID เนื่องจากควรเป็นเอกลักษณ์

หากต้องการพิจารณาว่าเลือกตัวเลือกใดให้ลองทำดังนี้:

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

เหตุการณ์จะถูกจับสำหรับปุ่มตัวเลือกทั้งหมดในกลุ่มและค่าของปุ่มที่เลือกจะถูกวางใน val

อัปเดต: หลังจากโพสต์แล้วฉันตัดสินใจว่าคำตอบของเปาโลด้านบนนั้นดีกว่าเนื่องจากใช้การสำรวจเส้นทาง DOM น้อยลง ฉันปล่อยให้คำตอบนี้ยืนเพราะแสดงวิธีการรับองค์ประกอบที่เลือกในลักษณะที่เข้ากันได้ข้ามเบราว์เซอร์

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

อีกวิธีหนึ่ง

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

มันใช้งานได้ดีสำหรับฉัน ตัวอย่างเช่นคุณมีปุ่มตัวเลือกสองปุ่มที่มี "ชื่อ" เหมือนกันและคุณเพียงต้องการรับค่าของปุ่มที่เลือก คุณอาจลองอันนี้

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

รหัสต่อไปนี้ใช้เพื่อรับค่าปุ่มตัวเลือกตามชื่อ

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

ขอบคุณ Adnan

ฉันพบคำถามนี้เมื่อฉันทำการวิจัยข้อผิดพลาดหลังจากฉันอัพเกรดจาก 1.7.2 จาก jQuery เป็น 1.8.2 ฉันกำลังเพิ่มคำตอบของฉันเพราะมีการเปลี่ยนแปลงใน jQuery 1.8 และสูงกว่าที่เปลี่ยนแปลงวิธีการตอบคำถามนี้ตอนนี้

ด้วย jQuery 1.8 พวกเขาเลิกคัดกรอง pseudo-like เช่น: radio,: checkbox,: text

การทำข้างต้นขณะนี้เป็นเพียงแทนที่ด้วย:radio[type=radio]

ดังนั้นคำตอบของคุณจะกลายเป็น jQuery 1.8 ขึ้นไปทุกเวอร์ชัน

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

คุณสามารถอ่านเกี่ยวกับการเปลี่ยนแปลงใน 1.8 readmeและตั๋วเฉพาะสำหรับการเปลี่ยนแปลงนี้รวมทั้งทำความเข้าใจว่าทำไมในหน้า: ตัวเลือกตัวเลือกวิทยุภายใต้ส่วนข้อมูลเพิ่มเติม

สำหรับใครก็ตามที่ไม่ต้องการรวมห้องสมุดเพื่อทำสิ่งที่ง่ายจริงๆ:

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

jsfiddle

สำหรับภาพรวมประสิทธิภาพของคำตอบปัจจุบันตรวจสอบที่นี่

หากคุณต้องการทราบมูลค่าของปุ่มตัวเลือกเริ่มต้นก่อนเหตุการณ์คลิกให้ลอง:

การแจ้งเตือน ($ ( "การป้อนข้อมูล: วิทยุการตรวจสอบ".) Val ());

คุณสามารถใช้ฟังก์ชั่นตัวกรองหากคุณมีกลุ่มวิทยุมากกว่าหนึ่งกลุ่มในหน้าดังต่อไปนี้

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

นี่คือไวโอลินซอ

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

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

หากคุณต้องการค่าจริง / เท็จใช้สิ่งนี้:

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

อย่างนี้อาจจะ?

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

เมื่อคุณคลิกปุ่มตัวเลือกใด ๆ ฉันเชื่อว่ามันจะจบลงด้วยการเลือกดังนั้นสิ่งนี้จะถูกเรียกสำหรับปุ่มตัวเลือกที่เลือก

ฉันมีปุ่มตัวเลือกมากกว่าหนึ่งกลุ่มในหน้าเดียวกันคุณสามารถลองใช้เพื่อรับค่าของปุ่มตัวเลือก:

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

ไชโย!

ยังสามารถใช้คลาส CSS เพื่อกำหนดช่วงของปุ่มแบบเรดิโอจากนั้นใช้ค่าต่อไปนี้เพื่อกำหนดค่า

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

สิ่งนี้ได้ผลสำหรับฉัน ..

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

jquery:

    $ (". radioClass"). แต่ละอัน (function () {
        ถ้า ($ (นี้) .is ( 'ตรวจสอบ'))
        การแจ้งเตือน ($ (นี้) .val ());
    });

หวังว่ามันจะช่วย ..

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

คุณอาจสังเกตว่าการใช้ตัวเลือกคลาสเพื่อรับค่า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แสดงผล 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ใช้ jQuery คือการใช้คลาส css ตามที่กล่าวไว้ในคำตอบนี้สำหรับคำถามที่ไม่เกี่ยวข้องทั้งหมดดังต่อไปนี้

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