4 checkboxes that act like radiobuttons in javascript

To create 4 checkboxes that act like radio buttons in JavaScript, you can use the following code:

HTML code including checkbox inputs


<input type="checkbox" id="option1" name="option" onclick="handleClick(this)">
<label for="option1">Option 1</label>

<input type="checkbox" id="option2" name="option" onclick="handleClick(this)">
<label for="option2">Option 2</label>

<input type="checkbox" id="option3" name="option" onclick="handleClick(this)">
<label for="option3">Option 3</label>

<input type="checkbox" id="option4" name="option" onclick="handleClick(this)">
<label for="option4">Option 4</label>
471 chars
12 lines

JavaScript code to act like radio buttons


index.tsx
let prevChecked = null;

// function to handle click on checkboxes
function handleClick(currCheckbox) {
  // uncheck all checkboxes except the one clicked
  if (prevChecked !== null && prevChecked !== currCheckbox) {
    prevChecked.checked = false;
  }
  prevChecked = currCheckbox;
}
286 chars
11 lines

In this code, we keep track of the previously checked checkbox using the prevChecked variable. When a checkbox is clicked, we uncheck all checkboxes except the current checkbox. Finally, we update the prevChecked variable with the current checkbox.

Note: It is important to have name="option" for all checkboxes to ensure they behave like radio buttons.

similar javascript code snippets

4 checkboxes if one of them is checked all other should be unchecked in javascript

set checkbox mandatory field in javascript in javascript

function that make it impossible to uncheck a checked checkbox in javascript

let checkboxes = 4 checkboxes select by id in javascript

4 checkboxes if one checked other unchecked in javascript

ckeckbox mandatory field in javascript

if no checkbox is selected make button inactive in javascript

import a module in javascript

connect an api in javascript

how to use useeffect in javascript

related categories