CODEWITHSUNDEEP
javascripthtmlcss
anonymous
anonymous

Reputation: 15

Make a checkbox checked or unchecked based on the number increment? (only in plain javascript)

How can we make a checkbox checked or unchecked programatically based on the increment number? If the number is 1 then the checkbox is checked and if the number is 0 then the checkebox is unchecked?

My html code

<input type="checkbox"  class="input-checkbox-correct"  name="checkCheckbox" onclick="addRightAnswer();" >
<input type="text"  placeholder="Enter your option"class="form-control-range-number" id="get-radio-input5" name="get-radio-input" >
<input type="number" class="get-radio-input-number" value="0" name="get-radio-input"/>
<button type="click" onclick="addMoreOptions(this)"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
<button type="click" onclick="removeOptions(this)"><i class="fa fa-minus-circle" aria-hidden="true"></i></button>

My Js code In this code I click on the checkbox then increase the number but I also want that if the number is increased then the checkbox to be automatically checked.

 function addRightAnswer() {
      var getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox-correct');
      var getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');
    
      getRadioOptionsNumberCheck.forEach(function(current, index) {
    
          if (current.checked) {
            getRadioInputNumber[index].value = 1; //
          } else {
            getRadioInputNumber[index].value = 0;
          }
    
      });
         
    }

Upvotes: 1

Views: 392

Answers (1)

Simone Rossaini
Simone Rossaini

Reputation: 8162

Is a simple if value is 1 do it, let's see my example:

function addRightAnswer() {
      var getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox-correct');
      var getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');
    
      getRadioOptionsNumberCheck.forEach(function(current, index) {
    
          if (current.checked) {
            getRadioInputNumber[index].value = 1; //
          } else {
            getRadioInputNumber[index].value = 0;
          }
    
      });
         
    }
function Checked(el){
  var getRadioOptionsNumberCheck = document.querySelector('.input-checkbox-correct');
  if(el.value > 0){
    getRadioOptionsNumberCheck.checked = true;
  }else{
    getRadioOptionsNumberCheck.checked = false;
  }


}
<input type="checkbox"  class="input-checkbox-correct"  name="checkCheckbox" onclick="addRightAnswer();" ><input type="text"  placeholder="Enter your option"class="form-control-range-number" id="get-radio-input5" name="get-radio-input" >
<input type="number" class="get-radio-input-number" value="0" min="0" max="1" onChange="Checked(this)" name="get-radio-input"/>
<button type="click" onclick="addMoreOptions(this)">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</button>
<button type="click" onclick="removeOptions(this)">
<i class="fa fa-minus-circle" aria-hidden="true"></i>
</button>

I add a function Checked with onchange in the input and always in the input i add min="0" max="1" because seems like you need only that.

edit after your comment:

function addRightAnswer() {
      var getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox-correct');
      var getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');
    
      getRadioOptionsNumberCheck.forEach(function(current, index) {
    
          if (current.checked) {
            getRadioInputNumber[index].value = 1; //
          } else {
            getRadioInputNumber[index].value = 0;
          }
    
      });
         
    }
function Checked(){
  var input1 = document.querySelector('#get-radio-input');
  var input2 = document.querySelector('#get-radio-input5');
  var getRadioOptionsNumberCheck = document.querySelector('.input-checkbox-correct');
  if(input1.value > 0 || input2.value > 0){
    getRadioOptionsNumberCheck.checked = true;
  }else{
    getRadioOptionsNumberCheck.checked = false;
  }


}
<input type="checkbox"  class="input-checkbox-correct"  name="checkCheckbox" onclick="addRightAnswer();" ><input type="text"  placeholder="Enter your option"class="form-control-range-number" id="get-radio-input5" name="get-radio-input" onChange="Checked()">
<input type="number" class="get-radio-input-number" id="get-radio-input" value="0" min="0" max="1" id="get-radio-input5" onChange="Checked()" name="get-radio-input"/>
<button type="click" onclick="addMoreOptions(this)">
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</button>
<button type="click" onclick="removeOptions(this)">
<i class="fa fa-minus-circle" aria-hidden="true"></i>
</button>

In this case i did a check in both input.

Upvotes: 2

Related Questions