While Checking Checkbox Value Is Increasing Or Decreasing But It Works For Only One Check Box, In Should Work For Every Checkbox( Plain Javascripr)

Please see this image it is working for only one checkbox but i want to work for every check box because id is same as 1st checkbox Here is my code:

Solution 1:

In html you use the same id for all inputs - this is not valid for html! Each item must have a unique id. I removed all id from your input using the class for reversal in the js code.

Also, your second iputs with the number also had the same id. This is also a mistake. I replaced with class. Like this:

class="get-radio-input-number"

Now by the code js... I wrote the logic for displaying the value in the input, using the forEach() method, which identifies the inputs by the [index] parameter.

window.onload = function() {
let getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox');
let getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');

  getRadioOptionsNumberCheck.forEach(function(current, index) {
    current.addEventListener('click', function() {

      if (current.checked) {
        getRadioInputNumber[index].value = 1;
      } 
      else
      {
        getRadioInputNumber[index].value = 0;
      }  

    });
  });
}

<divclass="modal-content"><spanclass="close"onclick="closeModal();">&times;</span><divclass="model-layout"><p>Enter question</p><formonsubmit="return false;"autocomplete="off"><divclass="form-group"><inputtype="text"id="radio-input"class="form-control"placeholder="Question"requiredautofocus></div><p>Enter Your Option and Points</p><divclass="form-group"id="divFectchAllQuestion"><div><inputtype="checkbox"class="input-checkbox"name="checkCheckbox"><inputtype="text"placeholder="Enter your option"class="form-control-range-number1"id="get-radio-input1"name="get-radio-input"value=""><inputtype="number"class="get-radio-input-number"value="0"name="get-radio-input" /><buttontype="click"onclick="addMoreOptions(this)"><iclass="fa fa-plus-circle"aria-hidden="true"></i></button><buttontype="button"disabled><iclass="fa fa-minus-circle"aria-hidden="true"></i></button></div><div><inputtype="checkbox"class="input-checkbox"name="checkCheckbox"><inputtype="text"placeholder="Enter your option"class="form-control-range-number"id="get-radio-input"name="get-radio-input"><inputtype="number"class="get-radio-input-number"value="0"name="get-radio-input" /><buttontype="click"onclick="addMoreOptions(this)"><iclass="fa fa-plus-circle"aria-hidden="true"></i></button><buttontype="click"onclick="removeOptions(this)"><iclass="fa fa-minus-circle"aria-hidden="true"></i></button></div><div><inputtype="checkbox"class="input-checkbox"name="checkCheckbox"><inputtype="text"placeholder="Enter your option"class="form-control-range-number1"id="get-radio-input3"name="get-radio-input"><inputtype="number"class="get-radio-input-number"value="0"name="get-radio-input" /><buttontype="click"onclick="addMoreOptions(this)"><iclass="fa fa-plus-circle"aria-hidden="true"></i></button><buttontype="click"onclick="removeOptions(this)"><iclass="fa fa-minus-circle"aria-hidden="true"></i></button></div><div><inputtype="checkbox"class="input-checkbox"name="checkCheckbox"><inputtype="text"placeholder="Enter your option"class="form-control-range-number1"id="get-radio-input4"name="get-radio-input"><inputtype="number"class="get-radio-input-number"value="0"name="get-radio-input" /><buttontype="click"onclick="addMoreOptions(this)"><iclass="fa fa-plus-circle"aria-hidden="true"></i></button><buttontype="click"onclick="removeOptions(this)"><iclass="fa fa-minus-circle"aria-hidden="true"></i></button></div></div><labelfor="radio-group-required"><inputtype="checkbox"class="input-checkbox"id="radio-group-required">Make this question compulsory</label><divclass="select-page form-group"><p>Select Page</p><selectid="line-page-no"name="line-page-no"class="page-options form-control"></select></div><divclass="form-group"><inputtype="submit"class="submit-button"value="Submit"onclick="addRadioGroup();"></div></form><pid="radio-error-message"></p></div></div>