我在表单中有一个复选框,我希望它能按照以下场景工作:

如果有人检查它,文本字段(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”的形式提交。然后,您可以在控制器级别按照自己的意愿将其分解。

其他回答

function calc()
{
  if (document.getElementById('xxx').checked) 
  {
      document.getElementById('totalCost').value = 10;
  } else {
      calculate();
  }
}

HTML

<input type="checkbox" id="xxx" name="xxx" onclick="calc();"/>

使用onclick事件,因为每次单击复选框都会改变它。

HTML:

<input type="checkbox" onchange="handleChange(event)">

JS:

function handleChange(e) {
     const {checked} = e.target;
}

纯javascript:

const checkbox = document.getElementById('myCheckbox') 复选框。addEventListener('change', (event) => { if (event.currentTarget.checked) { alert('检查'); }其他{ 警报(“不检查”); } }) 我的Checkbox: <input id="myCheckbox" type=" Checkbox" />

引用复选框的id,而不是# 将函数分配给onclick属性,而不是使用change属性

var checkbox = $("save_" + fieldName);
checkbox.onclick = function(event) {
    var checkbox = event.target;

    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
};