Cum se creează o casetă de selectare cu o etichetă pe care se poate face clic? (Programare, Html, Checkbox, Click, Etichetă)

laurent a intrebat.

Cum pot crea o casetă de selectare HTML cu o etichetă pe care se poate face clic (aceasta înseamnă că dacă se face clic pe etichetă se activează/dezactivează caseta de selectare)?

Comentarii

  • Crearea de etichete pentru casete de selectare și etichete radio care pot fi apăsate – Ați citit asta? –  > Por John.
12 răspunsuri
Wesley Murch

Metoda 1: Eticheta Wrap Label

Înfășurați caseta de selectare în cadrul unei etichete label etichetă:

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

Metoda 2: Utilizați eticheta for Attribute

Utilizați atributul for (se potrivește cu caseta de selectare id):

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

NOTĂ: ID-ul trebuie să fie unic pe pagină!

Explicație

Deoarece celelalte răspunsuri nu menționează acest lucru, o etichetă poate include până la 1 intrare și omite for atribut, și se va presupune că este pentru intrarea din cadrul acesteia.

Extras din w3.org (cu sublinierea mea):

[Atributul for] asociază în mod explicit eticheta care este definită cu un alt control. Atunci când este prezent, valoarea acestui atribut trebuie să fie aceeași cu valoarea atributului id al unui alt control din același document. Atunci când este absent, eticheta definită este asociată cu conținutul elementului.

Pentru a asocia implicit o etichetă cu un alt control, elementul de control trebuie să se afle în conținutul elementului LABEL.. În acest caz, LABEL nu poate conține decât un singur element de control. Eticheta însăși poate fi poziționată înainte sau după controlul asociat.

Utilizarea acestei metode prezintă unele avantaje față de for:

  • Nu este nevoie să se atribuie un id la fiecare casetă de control (grozav!).

  • Nu este nevoie să se utilizeze atributul extra din <label>.

  • Zona pe care se poate face clic pe intrare este, de asemenea, zona pe care se poate face clic pe etichetă, astfel încât nu există două locuri separate pentru a face clic care pot controla caseta de selectare – doar unul singur, indiferent de distanța dintre <input> și textul real al etichetei și indiferent de tipul de CSS pe care îl aplicați.

Demonstrație cu ceva CSS:

Comentarii

  • Îmi place, dar vă rugăm să editați din nou. Acest lucru este bun doar pentru casetele de control. Să nu-i încurajăm pe oameni să își înfășoare celelalte intrări cu etichete, pentru că astfel se strică sistemul de grilă și va fi mai greu de obținut o capacitate de răspuns pe mobil –  > Por Max.
  • Dacă poate cineva să explice comentariul lăsat de @John, vă rog să o faceți, pentru că pentru mine nu are niciun sens. –  > Por Wesley Murch.
  • 16

  • @John acesta este un ghid de marcare special pentru bootstrap. Dacă nu folosiți un framework sau folosiți unul diferit, ar trebui să fie complet în regulă. Vă mulțumim pentru răspuns. –  > Por Wesley Murch.
  • @John. Pe pagina pe care o legați, exemplele bootstrap toate înfășoară caseta de selectare cu etichetă, nu văd deloc avertismente așa cum indicați, poate că nu mai este relevant pentru cel mai recent bootstrap. –  > Por user2144406.
  • După cum am învățat astăzi, nu amestecați metoda 1 și metoda 2. Dacă înfășurați caseta de selectare într-o etichetă ȘI includeți for, atunci dacă faceți clic pe etichetă nu va declanșa caseta de selectare. –  > Por BBlake.
Quentin

Asigură-te că eticheta este asociată cu intrarea.

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

Comentarii

  • Sunt derutat de faptul că ai dat celor două checkbox-uri același nume și valori diferite. Este în mod intenționat? –  > Por LarsH.
  • @LarsH – Da, acesta este modul în care creați grupurile de casete de control. –  > Por Quentin.
  • Mulțumesc. Mă uitam la w3.org/wiki/HTML/Elements/input/checkbox și nu a fost de ajutor în această privință. –  > Por LarsH.
  • Cu PHP, asta nu va face ca $_POST[‘foo’] să aibă întotdeauna una dintre cele două valori maxime la un moment dat? Chiar dacă ambele sunt bifate. Ce este un grup de căsuțe de control? –  > Por jeromej.
  • @JeromeJ: Pentru ca php să se descurce corect, trebuie să adăugați paranteze pătrate la nume, de ex: <input type="checkbox" name="foo[]" value="bar" ...>. Acest lucru îți va da un array care conține valorile tuturor verificate căsuțe (care au acest nume). De exemplu $_POST['foo'][0] ar putea fi bar și $_POST['foo'][1] ar putea fi baz (dacă ambele sunt bifate). –  > Por Levite.
mrmoje

De asemenea, ați putea folosi pseudoelemente CSS pentru a alege și afișa etichetele din toate atributele de valoare ale casetei de selectare (respectiv).
Editați: Acest lucru va funcționa numai cu browsere bazate pe webkit și blink (Chrome(ium), Safari, Opera….) și, prin urmare, cu majoritatea browserelor mobile. Nu Firefox sau IE aici.
Acest lucru poate fi util doar atunci când încorporați webkit/blink în aplicațiile dvs.

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

Toate etichetele pseudoelementelor vor putea fi accesate prin clic.

Demonstrație:http://codepen.io/mrmoje/pen/oteLl, + Ideea de bază

Comentarii

  • Adevărat. Gecko și Trident și gecko nu par să le placă acest lucru. Acest lucru va funcționa numai cu Webkit și Blink. Voi actualiza răspunsul –  > Por mrmoje.
  • Downvoted. Deși este posibil, este o modalitate proastă – nu funcționează pe multe browsere, nu este bun pentru accesibilitate. –  > Por James Billingham.
  • Lăsând la o parte problemele de compatibilitate, această soluție nu este la fel de semantică ca răspunsul de sus, deoarece nu există o asociere directă în markup între <label> și <input> –  > Por deadboy.
  • „Funcționează pe Webkit/Blink” miroase a bug folosind ( stackoverflow.com/questions/2587669/… ), deci s-ar putea să nu mai funcționeze în orice moment. –  > Por Xenos.
Dave Kiss
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

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

Comentarii

  • Deoarece ar putea fi confuz pentru unii cititori, ar trebui să schimbați name la o valoare diferită de cea care este prezentă în for și id deoarece acestea două sunt legate, în timp ce name nu este (totuși, cred că este obligatoriu să fie inclus). –  > Por Dzhuneyt.
Mystral

Funcționează și ea :

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

Comentarii

  • Puteți omite for și id în exemplul dvs., deoarece label are doar un singur element de intrare în interiorul său. –  > Por Dzhuneyt.
John

Acest lucru ar trebui să vă ajute: W3Schools – Etichete

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

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

James Allardice

Utilizați label și elementul for pentru a-l asocia cu caseta de selectare:

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

Junaid khan

Arunkumar Ramasamy

În Angular eticheta materială cu caseta de selectare

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

Anni

Utilizați acest lucru

<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');
    });
});

Comentarii

  • Nu este necesar să folosiți JavaScript pentru a face acest lucru. Este încorporat în HTML. –  > Por Lasse Bunk.
  • @LasseBunk, dacă ar fi vorba doar de JavaScript, dar pentru ca acest lucru să funcționeze este necesară întreaga bibliotecă jQuery. Să vedem dacă cineva poate veni cu o soluție Angular 2. –  > Por laurent.