How to create a checkbox with a clickable label?
Method 1: Wrap Label Tag
Wrap the checkbox within a label
tag:
<label><input type="checkbox" name="checkbox" value="value">Text</label>
Method 2: Use the for
Attribute
Use the for
attribute (match the checkbox id
):
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>
NOTE: ID must be unique on the page!
Explanation
Since the other answers don't mention it, a label can include up to 1 input and omit the for
attribute, and it will be assumed that it is for the input within it.
Excerpt from w3.org (with my emphasis):
[The for attribute] explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
Using this method has some advantages over for
:
No need to assign an
id
to every checkbox (great!).No need to use the extra attribute in the
<label>
.The input's clickable area is also the label's clickable area, so there aren't two separate places to click that can control the checkbox - only one, no matter how far apart the
<input>
and actual label text are, and no matter what kind of CSS you apply to it.
Demo with some 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>
How to create an HTML checkbox with a clickable label and clickable box without the clickable whitespace
Just add a width: 25px;
to the container's style. The width should be just large enough to cover every checkbox (see snippet below):
/* Stylesheet *//* The container */
.container { display: block; position: relative; padding-left: 35px; width: 25px; /* this was added to fix the issue */ margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
/* Hide the browser's default checkbox */
.container input { position: absolute; opacity: 0; cursor: pointer;}
/* Create a custom checkbox */
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee;}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark { background-color: #ccc;}
/* When the checkbox is checked, add a blue background */
.container input:checked~.checkmark { background-color: #2196F3;}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none;}
/* Show the checkmark when checked */
.container input:checked~.checkmark:after { display: block;}
/* Style the checkmark/indicator */
.container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
<!DOCTYPE html><html>
<body>
<h1>Custom Checkboxes</h1>
<label class="container">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label>
<label class="container">Two <input type="checkbox"> <span class="checkmark"></span> </label>
<label class="container">Three <input type="checkbox"> <span class="checkmark"></span> </label>
</body>
</html>
How to make checkbox clickable only on checkbox?
Don't use a label, replace it with something else.
Nesting the input in the label automatically associates it with the label.
<div style="display: flex; align-items: center">
<input
type="checkbox"
style="margin-right: 12px"
class=""
checked="checked"
name="sameadr"
/>
<span class="reach-out"> Reach out to me on</span
><span class="whatsapp-icon"></span>
<span class="whatsapp-content"> Whatsapp</span>
</div>
Making checkbox and radio labels clickable
No reason other than laziness. <label>
s are essential for accessibility, and are also pretty handy for those of us who have poor aim with our mouse clicks :)
How to create a checkbox with a clickable label that trigger seperate event and not checkout/in the checkbox
Try this:
const labels = document.querySelectorAll("label");
labels.foreach(label => {
label.addEventListener("click", event => {
// PUT HERE WHAT YOU WANT TO DO WHEN THE
LABEL IS CLICKED
})
})
Hide check boxes and make labels clickable. JS
Note: Labels should be linked with id or name.
Here is custom implementation what you want.
But I don't think it is correct to select checkbox with only values
foreach ($row as $type) { ?>
<label for="<?php echo $type['Type'] ?>" class="interests-span"
onclick="toggleCheckboxFromLabel('<?php echo $type['Type'] ?>')"
>
<h3><?php echo $type['Type'] ?></h3>
</label>
<input type="checkbox" style="display:block;" value="<?php echo $type['Type']?>"
name="options[]"/>
<?php } ?>
<script>
function toggleCheckboxFromLabel(val){
var checkbox = document.querySelector('input[type="checkbox"][value="' + val + '"]')
checkbox.checked = !checkbox.checked;
}
</script>
Related Topics
How to Make a Whole Row in a Table Clickable as a Link
Multiple Lines of Input in ≪Input Type="Text" /≫
Difference Between ≪Input Type='Button' /≫ and ≪Input Type='Submit' /≫
Change Color of Png Image Via Css
How to Set Subject/Content of Email Using Mailto:
Putting ≪Div≫ Inside ≪P≫ Is Adding an Extra ≪P≫
What's the Difference Between Disabled="Disabled" and Readonly="Readonly" for HTML Form Input Fields
How to Find an Element by CSS Class With Xpath
Why Are My Css3 Media Queries Not Working on Mobile Devices
Detect When an Html5 Video Finishes
Put Icon Inside Input Element in a Form
Render a String in HTML and Preserve Spaces and Linebreaks
Table Fixed Header and Scrollable Body
How Does the "Position: Sticky;" Property Work