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

methods for transforming a string into an object

Can you explain to me the syntax used in Javascript?

Trigger javascript function with a button click

Looking to swap out the final value in a JavaScript array?

The -webkit-background-clip feature seems to be malfunctioning in Safari

Transforming a plain text field into an input field upon clicking a button or icon using Angular/Typescript

The Mapbox map fails to display properly upon initial page load

Is there a way to adjust the spacing between a specific background image in a design pattern? The image must be sourced online

Issue: parsing error, only 0 bytes out of 4344 have been successfully parsed on Node.js platform

How do I adjust the controls in Three.js to align with the previous camera position?

Sending a POST request from a React application to a Node server and processing the JSON

Jasmine test failing due to uninitialized angular controller

Emphasize the close button within the popup window as soon as it appears

Retrieving components from Ajax response data

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

Preventing the use of scripting tags in text boxes

The horizontal rule element is not displaying

Activate the class when clicked

A creative CSS technique to eliminate borders from ul elements without relying on the calc() function

Angular 13 does not currently have support for the experimental syntax 'importMeta' activated