我在表单中有一个复选框,我希望它能按照以下场景工作:
如果有人检查它,文本字段(totalCost)的值应该设置为10。 然后,如果我返回并取消选中它,函数calculate()将根据表单中的其他参数设置totalCost的值。
基本上,我需要这样的部分,当我选中复选框时,我做一件事,当我不选中它时,我做另一件事。
我在表单中有一个复选框,我希望它能按照以下场景工作:
如果有人检查它,文本字段(totalCost)的值应该设置为10。 然后,如果我返回并取消选中它,函数calculate()将根据表单中的其他参数设置totalCost的值。
基本上,我需要这样的部分,当我选中复选框时,我做一件事,当我不选中它时,我做另一件事。
当前回答
我知道这似乎是一个新手的答案,但我把它放在这里,这样它可以帮助其他人在未来。
假设您正在用foreach循环构建一个表。同时在最后添加复选框。
<!-- Begin Loop-->
<tr>
<td><?=$criteria?></td>
<td><?=$indicator?></td>
<td><?=$target?></td>
<td>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="active" value="<?=$id?>" <?=$status?'checked':''?>>
<!-- mark as 'checked' if checkbox was selected on a previous save -->
</div>
</td>
</tr>
<!-- End of Loop -->
你在表格下面放置一个按钮,隐藏输入:
<form method="post" action="/goalobj-review" id="goalobj">
<!-- we retrieve saved checkboxes & concatenate them into a string separated by commas.i.e. $saved_data = "1,2,3"; -->
<input type="hidden" name="result" id="selected" value="<?= $saved_data ?>>
<button type="submit" class="btn btn-info" form="goalobj">Submit Changes</button>
</form>
你可以这样写你的脚本:
<script type="text/javascript">
var checkboxes = document.getElementsByClassName('form-check-input');
var i;
var tid = setInterval(function () {
if (document.readyState !== "complete") {
return;
}
clearInterval(tid);
for(i=0;i<checkboxes.length;i++){
checkboxes[i].addEventListener('click',checkBoxValue);
}
},100);
function checkBoxValue(event) {
var selected = document.querySelector("input[id=selected]");
var result = 0;
if(this.checked) {
if(selected.value.length > 0) {
result = selected.value + "," + this.value;
document.querySelector("input[id=selected]").value = result;
} else {
result = this.value;
document.querySelector("input[id=selected]").value = result;
}
}
if(! this.checked) {
// trigger if unchecked. if checkbox is marked as 'checked' from a previous saved is deselected, this will also remove its corresponding value from our hidden input.
var compact = selected.value.split(","); // split string into array
var index = compact.indexOf(this.value); // return index of our selected checkbox
compact.splice(index,1); // removes 1 item at specified index
var newValue = compact.join(",") // returns a new string
document.querySelector("input[id=selected]").value = newValue;
}
}
</script>
您的复选框的id将在结果变量中以字符串“1,2”的形式提交。然后,您可以在控制器级别按照自己的意愿将其分解。
其他回答
使用onclick事件,因为每次单击复选框都会改变它。
function calc()
{
if (document.getElementById('xxx').checked)
{
document.getElementById('totalCost').value = 10;
} else {
calculate();
}
}
HTML
<input type="checkbox" id="xxx" name="xxx" onclick="calc();"/>
我知道这似乎是一个新手的答案,但我把它放在这里,这样它可以帮助其他人在未来。
假设您正在用foreach循环构建一个表。同时在最后添加复选框。
<!-- Begin Loop-->
<tr>
<td><?=$criteria?></td>
<td><?=$indicator?></td>
<td><?=$target?></td>
<td>
<div class="form-check">
<input type="checkbox" class="form-check-input" name="active" value="<?=$id?>" <?=$status?'checked':''?>>
<!-- mark as 'checked' if checkbox was selected on a previous save -->
</div>
</td>
</tr>
<!-- End of Loop -->
你在表格下面放置一个按钮,隐藏输入:
<form method="post" action="/goalobj-review" id="goalobj">
<!-- we retrieve saved checkboxes & concatenate them into a string separated by commas.i.e. $saved_data = "1,2,3"; -->
<input type="hidden" name="result" id="selected" value="<?= $saved_data ?>>
<button type="submit" class="btn btn-info" form="goalobj">Submit Changes</button>
</form>
你可以这样写你的脚本:
<script type="text/javascript">
var checkboxes = document.getElementsByClassName('form-check-input');
var i;
var tid = setInterval(function () {
if (document.readyState !== "complete") {
return;
}
clearInterval(tid);
for(i=0;i<checkboxes.length;i++){
checkboxes[i].addEventListener('click',checkBoxValue);
}
},100);
function checkBoxValue(event) {
var selected = document.querySelector("input[id=selected]");
var result = 0;
if(this.checked) {
if(selected.value.length > 0) {
result = selected.value + "," + this.value;
document.querySelector("input[id=selected]").value = result;
} else {
result = this.value;
document.querySelector("input[id=selected]").value = result;
}
}
if(! this.checked) {
// trigger if unchecked. if checkbox is marked as 'checked' from a previous saved is deselected, this will also remove its corresponding value from our hidden input.
var compact = selected.value.split(","); // split string into array
var index = compact.indexOf(this.value); // return index of our selected checkbox
compact.splice(index,1); // removes 1 item at specified index
var newValue = compact.join(",") // returns a new string
document.querySelector("input[id=selected]").value = newValue;
}
}
</script>
您的复选框的id将在结果变量中以字符串“1,2”的形式提交。然后,您可以在控制器级别按照自己的意愿将其分解。
try
totalCost.value = checkbox.checked ? 10 : calculate();
函数更改(复选框){ totalCost。Value =复选框。检查?10:计算(); } 函数compute () { 返回other.value * 2; } 输入{显示:块} <input type=" Checkbox " onclick="change(this) "" / > 总成本:<input id="totalCost" type="number" value=5 /> Other: <input id=" Other " type="number" value=7 />
如果你正在使用jQuery..那么我可以提出以下建议: 注意:我在这里做了一些假设
$('#my_checkbox').click(function(){
if($(this).is(':checked')){
$('input[name="totalCost"]').val(10);
} else {
calculate();
}
});