สลับปุ่มตัวเลือก HTML โดยคลิกที่ป้ายกำกับ

87

โปรดมีวิธีง่ายๆในการสลับปุ่มตัวเลือก - เมื่อมีการคลิกข้อความใกล้ ๆ - โดยไม่ต้องแนะนำ Javascript Framework ขนาดใหญ่ในโครงการ PHP ขนาดเล็กของฉันหรือไม่?

รูปแบบเว็บมีลักษณะดังนี้:

<html>
<body>
<form method="post">
<p>Mode:<br /> 
<input type="radio" name="mode" value="create"><i>create table</i><br />
<input type="radio" name="mode" value="select" checked>select records (can specify id)<br />
<input type="radio" name="mode" value="insert">insert 1 record (must specify all)<br />
<input type="radio" name="mode" value="delete">delete records (must specify id)<br />
<input type="radio" name="mode" value="drop"><i>drop table</i><br />
</p>
<p>Id: <input type="text" name="id" size=32 maxlength=32 /> (32 hex chars)</p>

<p>Latitude: <input type="text" name="lat" size=10 /> (between -90 and 90)</p>
<p>Longitude: <input type="text" name="lng" size=10 /> (between -90 and 90)</p>
<p>Speed: <input type="text" name="spd" size=10 /> (not negative)</p>
<p><input type="submit" value="OK" /></p>
</form>
</body>
</html>

javascript html radio-button

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

165

นอกจากนี้คุณยังสามารถรวมองค์ประกอบของคุณได้โดยไม่ต้องให้ ID แต่ละตัวเนื่องจาก a มีความ<label>หมายโดยปริยายสำหรับอินพุตที่มีอยู่ดังนี้:

<label>
   <input type="radio" name="mode" value="create">
   <i>create table</i>
</label>

— นิคเครเวอร์
แหล่งที่มา

4

สิ่งนี้ทำให้การจัดรูปแบบป้ายกำกับยากขึ้นและคุณต้องห่อข้อความของคุณในองค์ประกอบต่างๆมากขึ้น

— Soviut

3

ใช่ แต่ถ้าคุณไม่ได้จัดแต่งทรงผมจะช่วยให้คุณได้รับฟังก์ชันที่คุณต้องการได้ง่ายขึ้น ฉันไม่ต้องการเพิ่ม ID พิเศษและแอตทริบิวต์ "for"

— Dr. C. Hilarius

4

+1 ID อาจเป็นสิ่งที่ชั่วร้ายมากที่สุดเพื่อหลีกเลี่ยงพวกเขาตามกฎทั่วไป

— Chris Stephens

1

การห่อเป็นวิธีแก้ปัญหาที่เหนือกว่าในการใช้idและforไม่มีการห่อ เหตุผลก็คือหากฉลากมีระยะขอบกว้างและผู้ใช้เกิดคลิกตรงจุดที่น่าสนใจระหว่างช่องทำเครื่องหมายและป้ายกำกับ (ตามที่มักจะทำ) ก็จะไม่มีอะไรเกิดขึ้น Fiddle ที่นี่: jsfiddle.net/v157ctja/5

— Marcus Junius Brutus

72

คุณสามารถใช้<label>องค์ประกอบที่ออกแบบมาเพื่อทำสิ่งนั้น:

<input type="radio" id="radCreateMode" name="mode" value="create" />
<label for="radCreateMode"><i>create table</i></label>

— Frédéric Hamidi
แหล่งที่มา

1

@ อเล็กซานเดอร์อย่างแน่นอน เฉพาะ Safari เวอร์ชัน 2 และต่ำกว่าเท่านั้นที่ไม่รองรับ

— Frédéric Hamidi

3

และหลังจากนั้นคุณสามารถใช้ตัวเลือกinput#radCreateMode:checked ~ labelเพื่อใช้สไตล์กับป้ายกำกับ การนำสไตล์ไปใช้กับป้ายกำกับเมื่อเลือกจะไม่สามารถทำได้หากเราซ้อนอินพุตไว้ในฉลาก

— Zuhaib Ali

1

นี่ควรเป็นคำตอบที่ได้รับการยอมรับจริงๆมันเป็นวิธีที่เหมาะสมในการทำเช่นนี้

— greco.roamin

1

ฉันใช้ Safari v 13 และวิธีนี้ไม่ได้ผลสำหรับฉัน สามารถยกเลิกการเลือกปุ่มตัวเลือกได้ แต่ไม่ได้เลือก ฉันต้องพันป้ายกำกับรอบอินพุต: <label> <input> my label text </label> โปรดทราบว่าฉันไม่ได้ใช้ <form> หรือ <fieldset>

— IAM_AL_X

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

— Kevin .NET

5

การห่ออินพุตใต้ฉลากควรใช้งานได้

<label>
    <input type="radio" name="mode" value="create"><i>create table</i>
</label>

— เจสันชิง
แหล่งที่มา

1

ผมมีปัญหาในการหาค่าของปุ่มใช้วิธีนี้เป็นทางเลือกคือการใช้พื้นที่ตีเพิ่มพื้นที่ที่สามารถคลิกปุ่ม

— คริสโตเฟอร์กริกก์
แหล่งที่มา