How to use JavaScript in label

Create a checkbox in and control its selected state

With the continuous development of front-end development, JavaScript has become an indispensable scripting language, which can realize page interaction, dynamic effects, and forms. Verification and other functions. This article will introduce how to use JavaScript to create a checkbox in a label and control its selected state.

1. Create a check box

1. Use the input tag to create a check box

The essence of the check box is an input type form element. We can use 2213c9627c391f00ef101b1592023bcb tag to create a checkbox. Of course, we also need to set an id attribute and a value attribute for the check box.

For example:

5bb48b800ed973869d624429e087de86

In this way, we create a A checkbox with the id "checkbox1" and the value "checkbox1".

2. Use the label label to associate the check box

In order to facilitate operation, we can associate the check box with the label label. In this way, when the user clicks on the label label, the corresponding check box will be automatically selected.

To associate the check box with the label label, you only need to use the for attribute in the label label and set it to the id value of the corresponding check box.

For example:

a50c1d666d5cb55d002f52b5f9db404echeckbox18c1ecd4bb896b2264e0711597d40766c
7f817abefd7ac3fa1abbb882221b8ad0

In this way, when the user clicks the label "Check Box 1", the corresponding check box will be automatically selected.

2. Control the selected state of the check box

Now, we have created a check box and associated it with the label tag. Next, we can use JavaScript to control the selected state of the checkbox.

1. Get the check box

We can use the getElementById method to get the DOM element of the check box. For example:

var checkbox1 = document.getElementById("checkbox1");

In this way, we obtain the DOM element of the check box with the id "checkbox1".

2. Set the checked state of the check box

To set the checked state of the check box, we can use the checked attribute. If the value of this attribute is true, it means that the check box is selected; if the value of this attribute is false, it means that the check box is not selected.

For example:

checkbox1.checked = true; // Check the checkbox
checkbox1.checked = false; // Uncheck the checkbox

3. Listening for changes in the check box

If we want to do some operations when the status of the check box changes, we can do this by listening to the change event of the check box.

For example:

checkbox1.addEventListener("change", function() {
if (this.checked) {

console.log("复选框被选中了");

} else {

console.log("复选框被取消了选中状态");

}
});

In this way, when the status of the check box changes, the change event will be triggered and the corresponding operation will be performed.

3. Use JavaScript to create multiple check boxes

If we need to create multiple check boxes, we can create them dynamically through JavaScript and then add them to the page.

For example:

var checkboxWrapper = document.getElementById("checkboxWrapper"); // Get the container element
for (var i = 1; i <= 5; i ) {
var checkbox = document.createElement("input"); // Create input element
checkbox.type = "checkbox"; // Set input type to checkbox
checkbox.id = "checkbox" i; // Set id
checkbox.value = "checkbox" i; // Set value
var label = document.createElement("label"); // Create label element
label.setAttribute ("for", "checkbox" i); //Associate label with checkbox
label.innerHTML = "checkbox" i; //Set label text
checkboxWrapper.appendChild(checkbox); / / Add the checkbox to the container
checkboxWrapper.appendChild(label); // Add the label to the container
}

In this way, we dynamically create 5 checkboxes , and add it to the container element with the id "checkboxWrapper".

Summary

Using JavaScript, you can easily create a check box in the label tag and control its checked state through the checked attribute and change event. At the same time, we can also use JavaScript to dynamically create multiple check boxes to achieve more flexible functions.

The above is the detailed content of How to use JavaScript in label. For more information, please follow other related articles on the PHP Chinese website!