ක්ලික් කළ හැකි ලේබලයක් සහිත පිරික්සුම් කොටුවක් නිර්මාණය කරන්නේ කෙසේද?

ක්ලික් කළ හැකි ලේබලයක් සහිත 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>

සටහන : හැඳුනුම්පත පිටුවේ අද්විතීය විය යුතුය!

පැහැදිලි කිරීම

අනෙක් පිළිතුරු වල එය සඳහන් නොවන බැවින්, ලේබලයකට ආදානය 1 ක් දක්වා ඇතුළත් කළ හැකි අතර forගුණාංගය මඟ හැරිය හැකි අතර එය එය තුළ ඇති ආදානය සඳහා යැයි උපකල්පනය කෙරේ.

W3.org වෙතින් උපුටා ගැනීම (මගේ අවධාරණයෙන්):

[ගුණාංගය සඳහා] ලේබලය වෙනත් පාලනයක් සමඟ අර්ථ දක්වා ඇත. පවතින විට, මෙම ගුණාංගයේ වටිනාකම එකම ලේඛනයේ වෙනත් පාලනයක හැඳුනුම්පතේ වටිනාකමට සමාන විය යුතුය. නොමැති විට, අර්ථ දක්වා ඇති ලේබලය මූලද්‍රව්‍යයේ අන්තර්ගතය සමඟ සම්බන්ධ වේ.

වෙනත් පාලනයක් සමඟ ව්‍යංගයෙන් ලේබලයක් සම්බන්ධ කිරීම සඳහා, පාලක මූලද්‍රව්‍යය LABEL මූලද්‍රව්‍යයේ අන්තර්ගතය තුළ තිබිය යුතුය . මෙම අවස්ථාවේදී, LABEL හි අඩංගු විය හැක්කේ එක් පාලන අංගයක් පමණි. සම්බන්ධිත පාලනයට පෙර හෝ පසුව ලේබලය ස්ථානගත කළ හැකිය.

මෙම ක්‍රමය භාවිතා කිරීමෙන් වාසි කිහිපයක් ඇත for:

• idසෑම පිරික්සුම් කොටුවකටම නියම කිරීම අවශ්‍ය නොවේ (නියමයි!).

• හි ඇති අතිරේක ගුණාංගය භාවිතා කිරීම අවශ්‍ය නොවේ <label>.

• ආදානයේ ක්ලික් කළ හැකි ප්‍රදේශය ද ලේබලයේ ක්ලික් කළ හැකි ප්‍රදේශයකි, එබැවින් පිරික්සුම් කොටුව පාලනය කළ හැකි වෙනම ස්ථාන දෙකක් නොමැත - එකක් පමණක්, <input>සත්‍ය ලේබල් පා text ය කොතරම් දුරින් තිබුණත්, ඔබ කුමන ආකාරයේ CSS වුවත් එයට අදාළ වේ.

සමහර 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 ව්‍යාජ අංග භාවිතා කළ හැකිය.
සංස්කරණය කරන්න: මෙය ක්‍රියාත්මක වන්නේ වෙබ්කිට් සහ බ්ලින්ක් පදනම් කරගත් බ්‍රව්සර් (ක්‍රෝම් (අයිම්), සෆාරි, ඔපෙරා ....) සහ බොහෝ ජංගම බ්‍රව්සර් සමඟ පමණි. කිසිදු ෆයර්ෆොක්ස් හෝ IE මෙතන සහාය.
මෙය ප්‍රයෝජනවත් විය හැක්කේ ඔබේ යෙදුම් වලට වෙබ්කිට් / බ්ලින්ක් කාවැද්දීමේදී පමණි.

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

මෙය ඔබට උදව් විය යුතුය: W3 පාසල් - ලේබල

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