วิธีสร้างช่องทำเครื่องหมายที่มีป้ายกำกับที่คลิกได้?

ฉันจะสร้างช่องทำเครื่องหมาย HTML ด้วยป้ายกำกับที่สามารถคลิกได้ (ซึ่งหมายความว่าการคลิกที่ป้ายกำกับจะเป็นการเปิด / ปิดช่องทำเครื่องหมาย)

วิธีที่ 1: ตัดแท็กป้ายชื่อ

ล้อมช่องทำเครื่องหมายไว้ภายในlabelแท็ก:

<label><input type="checkbox" name="checkbox" value="value">Text</label>

วิธีที่ 2: ใช้forแอตทริบิวต์

ใช้forแอตทริบิวต์ (ตรงกับช่องทำเครื่องหมายid):

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

หมายเหตุ : ID จะต้องไม่ซ้ำกันในหน้า!

คำอธิบาย

เนื่องจากคำตอบอื่น ๆ ไม่ได้กล่าวถึงฉลากจึงสามารถรวมได้ถึง 1 อินพุตและไม่ใช้แอforททริบิวต์และจะถือว่ามีไว้สำหรับอินพุตภายใน

ตัดตอนมาจากw3.org (ด้วยการเน้นของฉัน):

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

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

การใช้วิธีนี้มีข้อดีมากกว่าfor:

• ไม่จำเป็นต้องกำหนดidช่องทำเครื่องหมายให้ทุกช่อง (ยอดเยี่ยม!)

• <label>ไม่จำเป็นต้องใช้แอตทริบิวต์พิเศษใน

• พื้นที่ที่สามารถคลิกได้ของอินพุตยังเป็นพื้นที่ที่สามารถคลิกได้ของป้ายกำกับดังนั้นจึงไม่มีสถานที่ให้คลิกแยกกันสองแห่งที่สามารถควบคุมช่องทำเครื่องหมายได้เพียงแห่งเดียวเท่านั้นไม่ว่า<input>ข้อความป้ายกำกับและข้อความจริงจะอยู่ห่างกันมากแค่ไหนนำไปใช้กับมัน

สาธิตด้วย CSS:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}

<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

เพียงตรวจสอบให้แน่ใจว่าฉลากนั้นเชื่อมโยงกับอินพุต

<fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>

คุณยังสามารถใช้องค์ประกอบหลอก CSS เพื่อเลือกและแสดงป้ายกำกับของคุณจากแอตทริบิวต์ค่าของช่องทำเครื่องหมายทั้งหมดของคุณ (ตามลำดับ)
แก้ไข:สิ่งนี้จะใช้ได้กับเบราว์เซอร์ที่ใช้ webkit และกะพริบ (Chrome (ium), Safari, Opera .... ) และเบราว์เซอร์มือถือส่วนใหญ่เท่านั้น ไม่มีFirefoxหรือ IE รองรับที่นี่
สิ่งนี้อาจมีประโยชน์เมื่อฝัง webkit / กะพริบลงในแอพของคุณ

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

ป้ายกำกับองค์ประกอบหลอกทั้งหมดจะสามารถคลิกได้

การสาธิต: http://codepen.io/mrmoje/pen/oteLl + ส่วนสำคัญของมัน

<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

มันทำงานเกินไป:

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>

สิ่งนี้จะช่วยคุณได้: W3Schools - Labels

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

ใช้labelองค์ประกอบและforแอตทริบิวต์เพื่อเชื่อมโยงกับช่องทำเครื่องหมาย:

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

ในฉลากวัสดุเชิงมุมพร้อมช่องทำเครื่องหมาย

<mat-checkbox>Check me!</mat-checkbox>

ใช้สิ่งนี้

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id" id="checkbox_lbl">Text</label>


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});