How to Determine the Value of a Selected Checkbox Using JavaScript?

Identifying the Checked Checkbox Value

In web development, it's often necessary to retrieve the value of a checked checkbox, especially in scenarios involving form submission or data manipulation. Consider the following code snippet:

<code class="html"><input class="messageCheckbox" type="checkbox" value="3" name="mailId[]">
<input class="messageCheckbox" type="checkbox" value="1" name="mailId[]"></code>

The goal is to utilize JavaScript to dynamically obtain the value associated with the checkbox that is currently checked.

Solution:

To retrieve the value of the selected checkbox, employ the following code:

<code class="javascript">let checkedCheckboxValue = document.querySelector('.messageCheckbox').checked;</code>

This approach involves utilizing the querySelector method to select the first element with the class name "messageCheckbox" and then retrieving its checked property, which returns a boolean value indicating whether the checkbox is selected or not. In cases where multiple checkboxes share the same class name, the code will only select and return the value of the first checked checkbox, as indicated in the question's requirement.

This solution effectively captures the value of the checked checkbox, allowing for further processing, such as submitting form data or conducting additional operations based on the selected value.

The above is the detailed content of How to Determine the Value of a Selected Checkbox Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!