ตรวจสอบปุ่มตัวเลือกด้วยจาวาสคริปต์

98

ด้วยเหตุผลบางอย่างฉันดูเหมือนจะคิดไม่ออก

ฉันมีปุ่มตัวเลือกใน html ซึ่งจะสลับหมวดหมู่:

<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category

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

ฉันได้ลองใช้เวอร์ชันนี้แล้ว (มีและไม่มี jQuery):

document.getElementById('#_1234').checked = true;

แต่ดูเหมือนจะไม่อัปเดต ฉันต้องการให้อัปเดตอย่างเห็นได้ชัดเพื่อให้ผู้ใช้สามารถมองเห็นได้ ใครสามารถช่วย?

แก้ไข: ฉันเหนื่อยเพียงและมองข้ามขอบคุณสำหรับการชี้ออกที่และ#$.prop()

javascript html radio-button

— ptf
แหล่งที่มา

ตรวจสอบคำถาม StackOverflow นี้: [วิธีตรวจสอบปุ่มตัวเลือกด้วย jQuery] [1] [1]: stackoverflow.com/questions/5665915/…

— Mandy Schoep

8

เปลี่ยนเป็นdocument.getElementById('_1234').checked = true;

— stackErr

1

@stackErr โดยไม่มี#

— Tim Seguine

ขออภัยคัดลอกวางผิด อัปเดตแล้ว @FelipeKM แล้วโปรดช่วยฉันด้วยฉันไม่พบสิ่งที่ช่วยได้

— ptf

@kjelelokk ตรวจสอบความคิดเห็นของฉันหรือคำตอบ

— Pointys

159

อย่าผสมไวยากรณ์ CSS / JQuery ( #สำหรับตัวระบุ) กับ JS ดั้งเดิม

โซลูชันดั้งเดิมของ JS:

document.getElementById("_1234").checked = true;

โซลูชัน jQuery:

$("#_1234").prop("checked", true);

— zavg
แหล่งที่มา

1

ในทางเทคนิคเป็นไวยากรณ์ตัวเลือก CSS jQuery เพิ่งยืมและขยาย

— Tim Seguine

jQuery ได้มาจากquerySelectorฉันจะจินตนาการ

— Andy

ดีกว่ามาก.attr("checked", "checked")

— ma77c

@Andy - Sizzle ถูกใช้ใน jQuery ตั้งแต่ต้นปี 2549 เป็นต้นไป ( en.wikipedia.org/wiki/JQuery#History ) querySelectorไม่ได้จัดส่งในเบราว์เซอร์จนถึงปี 2009 และไม่ได้ถูกใช้อย่างแพร่หลายโดยนักพัฒนาจนกระทั่งหลังจากนั้นไม่นาน ฉันไม่เคยใช้ jQuery มากขนาดนั้น แต่มันส่งผลอย่างมากต่อวิวัฒนาการของ JS

— Rounin

สิ่งนี้ตั้งค่ากล่องกาเครื่องหมาย แต่ไม่จำเป็นต้องเรียกเหตุการณ์ที่เกี่ยวข้อง เหตุการณ์ใดเกิดขึ้นเมื่อผู้ใช้คลิกปุ่มตัวเลือก

— robisrob

17

หากคุณต้องการตั้งค่าปุ่ม "1234" คุณต้องใช้ "id":

document.getElementById("_1234").checked = true;

เมื่อคุณใช้เบราว์เซอร์ API ("getElementById") คุณจะไม่ใช้ไวยากรณ์ตัวเลือก คุณเพียงแค่ส่งค่า "id" จริงที่คุณต้องการ คุณสามารถใช้ไวยากรณ์เลือกกับ jQuery หรือและ.querySelector().querySelectorAll()

— แหลม
แหล่งที่มา

ทุกคนได้รับองค์ประกอบโดย ID ฉันมีปุ่มตัวเลือกมากกว่าหนึ่งปุ่มที่มีชื่อเดียวกัน และฉันคิดว่านั่นคือสิ่งที่คนส่วนใหญ่ต้องการในการเลือกกลุ่มวิทยุตามชื่อแล้วขึ้นอยู่กับการตรวจสอบค่าหนึ่งใน

— Ndm Gjr

@NadeemGorsi แอตทริบิวต์ "id" ไม่สามารถแชร์กับองค์ประกอบมากกว่าหนึ่งรายการ ค่า "id" ทั้งหมดจะต้องไม่ซ้ำกันในหน้าที่กำหนด

— Pointy

10

วันนี้ในปี 2016 มีการบันทึกเพื่อใช้document.querySelectorโดยไม่ทราบ ID (โดยเฉพาะอย่างยิ่งหากคุณมีปุ่มตัวเลือกมากกว่า 2 ปุ่ม)

document.querySelector("input[name=main-categories]:checked").value

— สแตน
แหล่งที่มา

3

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

— Ndm Gjr

1

@NadeemGorsi ฉันให้คำตอบเพื่อเลือกหรือ "ตรวจสอบ" ปุ่มตัวเลือกโดยใช้ QuerySelector

— kevinf

6

วิธีที่ง่ายที่สุดน่าจะเป็นด้วย jQuery ดังนี้:

$(document).ready(function(){
  $("#_1234").attr("checked","checked");
})

ซึ่งจะเพิ่มแอตทริบิวต์ใหม่ "checked" (ซึ่งใน HTML ไม่ต้องการค่า) อย่าลืมรวมไลบรารี jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

— เอสเซอร์
แหล่งที่มา

หรือเพียงแค่$("#_1234").prop("checked", true)

— ไม่ได้กำหนด

3

เมื่อใช้document.getElementById()ฟังก์ชันคุณไม่จำเป็นต้องผ่าน#ก่อน id ขององค์ประกอบ

รหัส:

document.getElementById('_1234').checked = true;

การสาธิต: JSFiddle

— Daniel Kmak
แหล่งที่มา

3

ฉันสามารถเลือก (ตรวจสอบ) ปุ่มอินพุตวิทยุได้โดยใช้รหัส Javascript นี้ใน Firefox 72 ภายในหน้าตัวเลือกส่วนขยายเว็บเพื่อโหลดค่า:

var reloadItem = browser.storage.sync.get('reload_mode');
reloadItem.then((response) => {
    if (response["reload_mode"] == "Periodic") {
        document.querySelector('input[name=reload_mode][value="Periodic"]').click();
    } else if (response["reload_mode"] == "Page Bottom") {
        document.querySelector('input[name=reload_mode][value="Page Bottom"]').click();
    } else {
        document.querySelector('input[name=reload_mode][value="Both"]').click();
    }
});

โดยที่รหัสที่เกี่ยวข้องเพื่อบันทึกค่าคือ:

reload_mode: document.querySelector('input[name=reload_mode]:checked').value

ระบุ HTML ดังต่อไปนี้:

    <input type="radio" id="periodic" name="reload_mode" value="Periodic">
    <label for="periodic">Periodic</label><br>
    <input type="radio" id="bottom" name="reload_mode" value="Page Bottom">
    <label for="bottom">Page Bottom</label><br>
    <input type="radio" id="both" name="reload_mode" value="Both">
    <label for="both">Both</label></br></br>

— kevinf
แหล่งที่มา