CODEWITHSUNDEEP
javascripthtmljquerycss
Krol
Krol

Reputation: 13

Use only one checkbox from two

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 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>

Upvotes: 0

Views: 3358

Answers (4)

Carsten Massmann
Carsten Massmann

Reputation: 28196

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 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>

And here is an alternative, using radio buttons:

const inps=document.querySelectorAll(".input-wrapper input");
inps.forEach(e=>e.addEventListener("click",ev=>{
  e.checked=e!==inps.last;
  inps.last=e.checked?e: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>

Upvotes: 2

jmrker
jmrker

Reputation: 508

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; } ); }
   );
 };

Upvotes: 2

mrmonsieur
mrmonsieur

Reputation: 324

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.

Upvotes: 2

Łukasz Socha
Łukasz Socha

Reputation: 158

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

See change event and disabled

Upvotes: -1

Related Questions