Use only one checkbox from two-CodePudding

I have a form that has two checkboxes, now you can click the checkbox on both

The question is, is it possible to make it so that there is only one choice? For example, clicked on the first one, it turned on, clicked on the second one, the first turned off, the second turned on. It should also be possible to uncheck the box at any time. I know that I can use the radio type, but I need only checkboxes

.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 >
    <form  action="{{ route('send-contacts-call') }}">
        <div >
            <div >
                <label for="name">Name *</label>
                <div >
                    <input  id="name" type="text" name="name">
                </div>
            </div>
        </div>
        <div >
            <div >
                <label for="email">Email *</label>
                <div >
                    <input  id="email" type="email" name="email">
                </div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    <input  id="check1" name="check1" type="checkbox"><label>Check 1</label>
                    <input  id="check2" name="check2" type="checkbox"><label>Check 2</label>
                </div>
            </div>
        </div>
    </form>
</div>

CodePudding user response：

The script would loo something like this. I didn't test this so there might be misspellings causing errors and such.

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

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

// add events that fires when boxes are checked
box1.addEventListener( "change", function() {

  // see if the other box is already checked
  if ( box2.checked ) {

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

But you can also just use radio buttons and invoke a hidden reset button when you click a checked radio button I think.

CodePudding user response：

Here is another version that will work with any number of checkboxes.

const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
  inps.forEach(c=>{if(c!==e) c.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 >
    <form  action="{{ route('send-contacts-call') }}">
        <div >
            <div >
                <label for="name">Name *</label>
                <div >
                    <input  id="name" type="text" name="name">
                </div>
            </div>
        </div>
        <div >
            <div >
                <label for="email">Email *</label>
                <div >
                    <input  id="email" type="email" name="email">
                </div>
            </div>
        </div>
        <div >
            <div >
                <div >
                    <input  id="check1" name="check1" type="checkbox"><label>Check 1</label>
                    <input  id="check2" name="check2" type="checkbox"><label>Check 2</label>
                </div>
            </div>
        </div>
    </form>
</div>

CodePudding user response：

Alternate solution: HTML:

<section> 
 <label><input type="checkbox" value="CBox 1"> CBox 1</label> 
 <label><input type="checkbox" value="CBox 2"> CBox 2</label> 
 <label><input type="checkbox" value="CBox 3"> CBox 3</label> 
 <label><input type="checkbox" value="CBox 4"> CBox 4</label> 
 <label><input type="checkbox" value="CBox 5"> CBox 5</label> 
</section>
<p> Checkbox acts like a radio button, but can be reset </p>

Javascript:

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

CodePudding user response：

You can use JavaScript / jQuery for it. If check1 is active, just disable check2.

See change event and disabled