คลิกปุ่มตัวเลือก javascript jquery


91

ฉันมีปุ่มตัวเลือก 2 ปุ่มและ jquery ทำงานอยู่

<input type="radio" name="lom" value="1" checked> first
<input type="radio" name="lom" value="2"> second

ตอนนี้ด้วยปุ่มที่ฉันสามารถตั้งค่าบนคลิกเพื่อเรียกใช้ฟังก์ชัน อะไรคือวิธีทำให้ปุ่มตัวเลือกเรียกใช้ฟังก์ชันเมื่อฉันคลิกที่ปุ่มใดปุ่มหนึ่ง


4
บันทึก. ไม่ควรให้องค์ประกอบของฟอร์มตอบสนองต่อการคลิกเนื่องจากหลาย ๆ คนนำทางแบบฟอร์มโดยใช้แป้นพิมพ์
superluminary

คำตอบ:


170

คุณสามารถใช้.changeสำหรับสิ่งที่คุณต้องการ

$("input[@name='lom']").change(function(){
    // Do something interesting here
});

ณ jQuery 1.3

คุณไม่ต้องการ "@" อีกต่อไป วิธีเลือกที่ถูกต้องคือ:

$("input[name='lom']")

7
โปรดทราบว่าใน jQuery 1.3 คุณไม่จำเป็นต้องใช้ "@" อีกต่อไป วิธีที่ถูกต้องในการเลือกคือ$("input[name='lom']")
lubar

4
เป็นไปได้หรือไม่ที่จะรวมโซลูชันนี้เข้ากับโซลูชันของ @JohnIdol ด้านล่างด้วยข้อความเงื่อนไขตามค่าวิทยุ อดีต$("input[name='lom']").change(function(){ if ($(this).val() === '1') {..... // rest conditional statements based on values here } ;
LazerSharks

สำหรับ jQuery 1.3 คุณไม่ควรใช้ '@' กับคุณสมบัติ name หากคุณทำเช่นนั้นคุณจะได้รับjquery.self-0a6570c….js?body=1:1464 Uncaught Error: Syntax error, unrecognized expressionข้อผิดพลาด ดังนั้นจึงไม่ใช่เรื่องที่ต้องเลือก
Scaryguy

54

หากคุณมีวิทยุของคุณในคอนเทนเนอร์ที่มี id = radioButtonContainerId คุณยังสามารถใช้ onClick จากนั้นตรวจสอบว่ารายการใดถูกเลือกและเรียกใช้ฟังก์ชันบางอย่างตามลำดับ:

$('#radioButtonContainerId input:radio').click(function() {
    if ($(this).val() === '1') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
  });

ขอขอบคุณ. สิ่งนี้ใช้ได้ผลสำหรับฉันเพราะฟิลด์ของฉันเป็นส่วนหนึ่งของอาร์เรย์และฉันไม่สามารถใช้สัญกรณ์ input [name = 'xxx'] - <input type = "radio" name = "Need [measure_type]" id = "Need_measure_type" value = "aaa">
crafter

สิ่งนี้ตอบสนองแม้ว่าคุณจะแท็บลงและเลื่อนเครื่องหมายด้วยปุ่มลูกศรหรือไม่
Alisso

สิ่งนี้จะใช้ไม่ได้ใน mobile # selector ไม่ทำงานในอุปกรณ์เคลื่อนที่
zawhtut

19
<input type="radio" name="radio" value="creditcard" />
<input type="radio" name="radio" value="cash"/>
<input type="radio" name="radio" value="cheque"/>
<input type="radio" name="radio" value="instore"/>

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

1
แม้ว่าคำตอบนี้จะไม่แสดงวิธีการต่อรหัสเข้ากับเหตุการณ์ แต่ฉันชอบที่คำตอบนี้มีข้อมูลสำหรับวิธีดึงค่าของกลุ่มปุ่มตัวเลือก
Manfred

1
$ ("input [@ name = 'lom']"). change (function () {// Do something interesting here});
Bishoy Hanna


8

มีหลายวิธีในการดำเนินการนี้ ขอแนะนำให้มีคอนเทนเนอร์รอบ ๆ ปุ่มตัวเลือก แต่คุณสามารถใส่ชั้นเรียนลงบนปุ่มได้โดยตรง ด้วย HTML นี้:

<ul id="shapeList" class="radioList">
<li><label>Shape:</label></li>
<li><input id="shapeList_0" class="shapeButton" type="radio" value="Circular" name="shapeList" /><label for="shapeList_0">Circular</label></li>
<li><input id="shapeList_1" class="shapeButton" type="radio" value="Rectangular" name="shapeList" /><label for="shapeList_1">Rectangular</label></li>
</ul>

คุณสามารถเลือกตามชั้นเรียน:

$(".shapeButton").click(SetShape);

หรือเลือกตาม ID คอนเทนเนอร์:

$("#shapeList").click(SetShape);

ไม่ว่าในกรณีใดเหตุการณ์จะทริกเกอร์เมื่อคลิกปุ่มตัวเลือกหรือป้ายกำกับแม้ว่าในกรณีหลังจะผิดปกติ (การเลือกโดย "#shapeList") การคลิกที่ป้ายกำกับจะเรียกใช้ฟังก์ชันคลิกสองครั้งด้วยเหตุผลบางประการที่ น้อยที่สุดใน FireFox; การเลือกตามชั้นเรียนจะไม่ทำเช่นนั้น

SetShape เป็นฟังก์ชันและมีลักษณะดังนี้:

function SetShape() {
    var Shape = $('.shapeButton:checked').val();
//dostuff
}

ด้วยวิธีนี้คุณสามารถมีป้ายกำกับบนปุ่มของคุณและสามารถมีรายการปุ่มตัวเลือกหลายรายการในหน้าเดียวกันซึ่งทำสิ่งต่างๆได้ คุณยังสามารถให้แต่ละปุ่มในรายการเดียวกันทำสิ่งที่แตกต่างกันได้โดยการตั้งค่าพฤติกรรมที่แตกต่างกันใน SetShape () ตามค่าของปุ่ม


3

การ จำกัด การค้นหา DOM เป็นสิ่งที่ดีเสมอ ควรใช้ผู้ปกครองด้วยจะดีกว่าเพื่อไม่ให้ DOM ทั้งหมดถูกส่งผ่าน

มันเร็วมาก

<div id="radioBtnDiv">
  <input name="myButton" type="radio" class="radioClass" value="manual" checked="checked"/>
 <input name="myButton" type="radio" class="radioClass" value="auto" checked="checked"/>
</div>



 $("input[name='myButton']",$('#radioBtnDiv')).change(
    function(e)
    {
        // your stuffs go here
    });
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.