Select either one checkbox out of two available options

Question

Select either one checkbox out of two available options

My form includes two checkboxes, allowing users to click on both of them.

I'm wondering if it's possible to set it up so that only one checkbox can be selected at a time. For example, clicking on the first checkbox would turn it on while turning off the second one, and vice versa. Users should also have the option to uncheck any box at any point. I am aware that radio buttons provide this functionality, but I specifically need to stick with checkboxes in this case.

.call-form-item {
    padding-bottom: 12px;
    margin-bottom: 24px;
    margin-left: 50px;
    margin-right: 50px;
}

input {
      margin: 0;
      box-sizing: border-box;
      outline: none;
      border: none;
      background-color: #EEF0F7;
      margin-right: 10px;
}

.input-wrapper {
      display: flex;
      align-items: flex-start;
}

label {
      color: #808694;
      font-family: Montserrat;
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 0;
      line-height: 16px;
      text-transform: uppercase;
      margin-right: 10px;
}

input[type=checkbox]:focus {
      outline: rgba(0, 0, 0, 0.2);
    }

    input[type=checkbox] {
      background-color: #EEF0F7;
      border-radius: 2px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 17px;
      height: 17px;
      cursor: pointer;
      position: relative;
    }

    input[type=checkbox]:checked {
      background-color: #808694;
      background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contacts-call-form">
    <form class="js-form" action="{{ route('send-contacts-call') }}">
        <div class="col-md-6">
            <div class="call-form-item">
                <label for="name">Name *</label>
                <div class="input-wrapper">
                    <input class="js-form-call-name" id="name" type="text" name="name">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="call-form-item">
                <label for="email">Email *</label>
                <div class="input-wrapper">
                    <input class="js-form-call-email" id="email" type="email" name="email">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="call-form-item">
                <div class="input-wrapper">
                    <input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
                    <input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
                </div>
            </div>
        </div>
    </form>
</div>

javascript html jquery css

Answer 1

Answer №1

Here is a sample script that could be used for the task at hand. Please note that I have not tested this code, so there may be errors and misspellings.

// Accessing the first checkbox element
let box1 = document.getElementByID( "check1" );

// Accessing the second checkbox element
let box2 = document.getElementByID( "check2" );

// Adding event listeners for when checkboxes are checked
box1.addEventListener( "change", function() {

  // Checking if the other checkbox is already checked
  if ( box2.checked ) {

    // If it is, uncheck it
    box2.checked = false;
  }
});
box2.addEventListener( "change", function() {
  if ( box1.checked ) {
    box1.checked = false;
  }
});

Alternatively, you could consider using radio buttons and triggering a hidden reset button when a radio button is selected.

Answer 2

Here is a sample script that could be used for the task at hand. Please note that I have not tested this code, so there may be errors and misspellings.

// Accessing the first checkbox element
let box1 = document.getElementByID( "check1" );

// Accessing the second checkbox element
let box2 = document.getElementByID( "check2" );

// Adding event listeners for when checkboxes are checked
box1.addEventListener( "change", function() {

  // Checking if the other checkbox is already checked
  if ( box2.checked ) {

    // If it is, uncheck it
    box2.checked = false;
  }
});
box2.addEventListener( "change", function() {
  if ( box1.checked ) {
    box1.checked = false;
  }
});

Alternatively, you could consider using radio buttons and triggering a hidden reset button when a radio button is selected.

Answer 3

Answer №2

Another approach: HTML:

<div> 
 <label><input type="checkbox" value="Check 1"> Check 1</label> 
 <label><input type="checkbox" value="Check 2"> Check 2</label> 
 <label><input type="checkbox" value="Check 3"> Check 3</label> 
 <label><input type="checkbox" value="Check 4"> Check 4</label> 
 <label><input type="checkbox" value="Check 5"> Check 5</label> 
</div>
<p> Checkboxes function like radio buttons, with the ability to clear selections </p>

Javascript:

 const checkboxes = document.querySelectorAll('div input[type="checkbox"]');
 for (checkbox of checkboxes) {
   checkbox.addEventListener('click',
     function(event) { checkboxes.forEach( (x) => { if (event.currentTarget != x) x.checked = false; } ); }
   );
 };

Answer 4

Another approach: HTML:

<div> 
 <label><input type="checkbox" value="Check 1"> Check 1</label> 
 <label><input type="checkbox" value="Check 2"> Check 2</label> 
 <label><input type="checkbox" value="Check 3"> Check 3</label> 
 <label><input type="checkbox" value="Check 4"> Check 4</label> 
 <label><input type="checkbox" value="Check 5"> Check 5</label> 
</div>
<p> Checkboxes function like radio buttons, with the ability to clear selections </p>

Javascript:

 const checkboxes = document.querySelectorAll('div input[type="checkbox"]');
 for (checkbox of checkboxes) {
   checkbox.addEventListener('click',
     function(event) { checkboxes.forEach( (x) => { if (event.currentTarget != x) x.checked = false; } ); }
   );
 };

Answer 5

Answer №3

Here is an updated version that can accommodate any number of checkboxes:

const checkboxes = document.querySelectorAll(".input-wrapper input");
checkboxes.forEach(checkbox => checkbox.addEventListener("click", event => {
  checkboxes.forEach(cb => {if(cb !== checkbox) cb.checked = false})
}))

.call-form-item {
    padding-bottom: 12px;
    margin-bottom: 24px;
    margin-left: 50px;
    margin-right: 50px;
}

input {
      margin: 0;
      box-sizing: border-box;
      outline: none;
      border: none;
      background-color: #EEF0F7;
      margin-right: 10px;
}

.input-wrapper {
      display: flex;
      align-items: flex-start;
}

label {
      color: #808694;
      font-family: Montserrat;
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 0;
      line-height: 16px;
      text-transform: uppercase;
      margin-right: 10px;
}

input[type=checkbox]:focus {
      outline: rgba(0, 0, 0, 0.2);
    }

    input[type=checkbox] {
      background-color: #EEF0F7;
      border-radius: 2px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 17px;
      height: 17px;
      cursor: pointer;
      position: relative;
    }

    input[type=checkbox]:checked {
      background-color: #808694;
      background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
    }

<div class="contacts-call-form">
    <form class="js-form" action="{{ route('send-contacts-call') }}">
        <div class="col-md-6">
            <div class="call-form-item">
                <label for="name">Name *</label>
                <div class="input-wrapper">
                    <input class="js-form-call-name" id="name" type="text" name="name">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="call-form-item">
                <label for="email">Email *</label>
                <div class="input-wrapper">
                    <input class="js-form-call-email" id="email" type="email" name="email">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="call-form-item">
                <div class="input-wrapper">
                    <input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
                    <input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
                </div>
            </div>
        </div>
    </form>
</div>

Additionally, here is an alternative method using radio buttons:

const radios = document.querySelectorAll(".input-wrapper input");
radios.forEach(radio => radio.addEventListener("click", event => {
  radio.checked = (radio !== radios.last);
  radios.last = radio.checked ? radio : null;
}))

<div class="input-wrapper">
  <label><input name="radio" value="1" type="radio">Check 1</label>
  <label><input name="radio" value="2" type="radio">Check 2</label>
  <label><input name="radio" value="3" type="radio">Check 3</label>
</div>

Answer 6

Here is an updated version that can accommodate any number of checkboxes:

const checkboxes = document.querySelectorAll(".input-wrapper input");
checkboxes.forEach(checkbox => checkbox.addEventListener("click", event => {
  checkboxes.forEach(cb => {if(cb !== checkbox) cb.checked = false})
}))

.call-form-item {
    padding-bottom: 12px;
    margin-bottom: 24px;
    margin-left: 50px;
    margin-right: 50px;
}

input {
      margin: 0;
      box-sizing: border-box;
      outline: none;
      border: none;
      background-color: #EEF0F7;
      margin-right: 10px;
}

.input-wrapper {
      display: flex;
      align-items: flex-start;
}

label {
      color: #808694;
      font-family: Montserrat;
      font-size: 10px;
      font-weight: bold;
      letter-spacing: 0;
      line-height: 16px;
      text-transform: uppercase;
      margin-right: 10px;
}

input[type=checkbox]:focus {
      outline: rgba(0, 0, 0, 0.2);
    }

    input[type=checkbox] {
      background-color: #EEF0F7;
      border-radius: 2px;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 17px;
      height: 17px;
      cursor: pointer;
      position: relative;
    }

    input[type=checkbox]:checked {
      background-color: #808694;
      background: #808694 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
    }

<div class="contacts-call-form">
    <form class="js-form" action="{{ route('send-contacts-call') }}">
        <div class="col-md-6">
            <div class="call-form-item">
                <label for="name">Name *</label>
                <div class="input-wrapper">
                    <input class="js-form-call-name" id="name" type="text" name="name">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="call-form-item">
                <label for="email">Email *</label>
                <div class="input-wrapper">
                    <input class="js-form-call-email" id="email" type="email" name="email">
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="call-form-item">
                <div class="input-wrapper">
                    <input class="js-form-call-check1" id="check1" name="check1" type="checkbox"><label>Check 1</label>
                    <input class="js-form-call-check2" id="check2" name="check2" type="checkbox"><label>Check 2</label>
                </div>
            </div>
        </div>
    </form>
</div>

Additionally, here is an alternative method using radio buttons:

const radios = document.querySelectorAll(".input-wrapper input");
radios.forEach(radio => radio.addEventListener("click", event => {
  radio.checked = (radio !== radios.last);
  radios.last = radio.checked ? radio : null;
}))

<div class="input-wrapper">
  <label><input name="radio" value="1" type="radio">Check 1</label>
  <label><input name="radio" value="2" type="radio">Check 2</label>
  <label><input name="radio" value="3" type="radio">Check 3</label>
</div>

Answer 7

Answer №4

To achieve this functionality, you can utilize JavaScript or jQuery. If the checkbox named check1 is checked, then simply deactivate the checkbox named check2.

Refer to resources on the change event and disabling elements

Answer 8

To achieve this functionality, you can utilize JavaScript or jQuery. If the checkbox named check1 is checked, then simply deactivate the checkbox named check2.

Refer to resources on the change event and disabling elements

Select either one checkbox out of two available options

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Successful Mongoose query in Node.js, however the array remains empty even after using forEach loop. Issue with MongoDB integration

What are some of the techniques for customizing the DOM generated by material-ui in ReactJS?

Comparing the differences between while loops and setTimeout function in JavaScript

When attempting to print certain attributes, the Node.JS array unexpectedly becomes undefined

Steps to installing npm on Ubuntu without root access:1. First, download

Text input fields within a grid do not adjust to different screen sizes when placed within a tab

Displaying a preloaded image on the canvas

Challenges with server side JavaScript in Nuxt.js, causing confusion with the framework

What are some ways to decrease the dimensions of my dateTimePicker?

Optimizing React components by efficiently updating props without triggering unnecessary renders

I'm unsure of the most efficient way to condense this statement

Securing a string in Spring MVC using @RequestBody with Integer variableencryption

Is there a way to automatically fill number fields by clicking on radio buttons using a JavaScript function?

I am struggling to understand the significance of the $ symbol in this particular context

What is the typical response time for a request using javascript axios?

How to temporarily disable CSS hover effects

Make sure to blur all images whenever one of them is clicked

Is it not feasible to place a well within a column using Bootstrap?

Using Handlebars JS to incorporate HTML tags such as <li>, <br>, and more in your data

What could be the reason behind the button's lack of color change with this particular code?