javascript - 复选框增减问题
问题描述
现在我面临一个问题,如果第一个复选框数量增加然后单击第二个复选框然后第一个复选框值将显示 1 它应该是我增加了 4 或 5 但它会自动显示 1 通过选中另一个复选框
我的 Js 代码在此代码中,我单击复选框,然后增加数字,但我还希望如果数字增加,则自动选中复选框。
function addRightAnswer(element, index) {
var getRadioInputNumber = document.querySelectorAll('.get-radio-input-number');
if (element.checked) {
getRadioInputNumber[index].value = 1;
} else {
getRadioInputNumber[index].value = 0;
}
}
function setCheckBox(element, index) {
var getRadioOptionsNumberCheck = document.querySelectorAll('.input-checkbox-correct');
if (element.value > 0) {
getRadioOptionsNumberCheck[index].checked = true;
} else {
getRadioOptionsNumberCheck[index].checked = false;
}
}
<div class="modal-content"><span class="close" onclick="closeModal();">×</span><div class="model-layout"><p>Enter question</p><form onsubmit="return false;" autocomplete="off"><div class="form-group"><input type="text" id="radio-input" class="form-control" placeholder="Question" required autofocus></div><p>Enter Your Option and Points</p><div class="form-group" id="divFectchAllQuestion"><div><input type="checkbox" class="input-checkbox-correct" name="checkCheckbox" onclick="addRightAnswer(this, 0);"><input type="text" placeholder="Enter your option"class="form-control-range-number1" id="get-radio-input1" name="get-radio-input" value=""><input type="number" class="get-radio-input-number" value="0" name="get-radio-input" onChange="setCheckBox(this, 0);" /><button type="click" onclick="addMoreOptions()"><i class="fa fa-plus-circle" aria-hidden="true"></i></button><button type="button" disabled><i class="fa fa-minus-circle" aria-hidden="true"></i></button></div><div><input type="checkbox" class="input-checkbox-correct" name="checkCheckbox" onclick="addRightAnswer(this, 1);"><input type="text" placeholder="Enter your option"class="form-control-range-number" id="get-radio-input" name="get-radio-input" ><input type="number" class="get-radio-input-number" value="0" name="get-radio-input" onChange="setCheckBox(this, 0);" /><button type="click" onclick="addMoreOptions()"><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></div><div><input type="checkbox" class="input-checkbox-correct" name="checkCheckbox" onclick="addRightAnswer(this, 1);"><input type="text" placeholder="Enter your option"class="form-control-range-number1" id="get-radio-input3" name="get-radio-input" ><input type="number" class="get-radio-input-number" value="0" name="get-radio-input" onChange="setCheckBox(this, 0);" /><button type="click" onclick="addMoreOptions()"><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></div><div><input type="checkbox" class="input-checkbox-correct" name="checkCheckbox" onclick="addRightAnswer(this, 1);"><input type="text" placeholder="Enter your option"class="form-control-range-number1" id="get-radio-input4" name="get-radio-input" ><input type="number" class="get-radio-input-number" value="0" name="get-radio-input" onChange="setCheckBox(this, 0);" /><button type="click" onclick="addMoreOptions()"><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></div></div><label for="radio-group-required"><input type="checkbox" class="input-checkbox-correct" id="radio-group-required">Make this question compulsory</label><div class="select-page form-group"><p>Select Page</p><select id="line-page-no" name="line-page-no" class="page-options form-control"></select></div><div class="form-group"><input type="submit" class="submit-button" value="Submit" onclick="addRadioGroup();"></div></form><p id="radio-error-message"></p></div></div>
解决方案
<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" onChange="setCheckBox();"/>
<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>
<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" onChange="setCheckBox();"/>
<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>
推荐阅读
- mysql - 我如何在我的 sql 表中读取这种类型的 json 对象
- c++ - 试图将字符从 Arduino pin 写入 Putty
- python - 导致“TypeError:无法使用此索引类型 datetimeindex 执行 truediv”的日期减法
- javascript - 如何在JS中的一长串JSON数据中过滤多个值?
- javascript - 加载页面时 SessionStorage.getitem 不起作用
- mysql - 使用 Windows 的 cmd 重置 MySQL 密码后,我无法在 NodeJs 中启动 MySQL 服务器
- tfsbuild - 对 TFS 2017 Gated Build 中的已提交更改和其他功能运行持续集成触发器的确切用途是什么?
- syntax - 我试图运行以下查询,但它显示语法错误
- forms - 使用 vuex 发布表单数据
- python - 通过 PIP 在 opencv-python 中没有最新的(4.3.0.)openCV 库