Javascript复选框onChange

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

• 如果有人检查，文本字段（

  totalCost

  ）的值应设置为

  10

• 然后，如果我返回并取消选中它，函数

  calculate（）

  将根据表单中的其他参数设置

  totalCost

  的值

---

因此，基本上，我需要一个部分，当我选中复选框时，我做一件事，当我取消选中复选框时，我做另一件事。

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

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

HTML

---

如果您使用的是jQuery。。那么我可以提出以下建议： 注意：我在这里做了一些假设

$('#my_checkbox').click(function(){
    if($(this).is(':checked')){
        $('input[name="totalCost"]').val(10);
    } else {
        calculate();
    }
});

---

下面的解决方案使用jquery。假设您有一个id为

checkboxId

的复选框

const checkbox = $("#checkboxId");

checkbox.change(function(event) {
    var checkbox = event.target;
    if (checkbox.checked) {
        //Checkbox has been checked
    } else {
        //Checkbox has been unchecked
    }
});

---

通过复选框的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
    }
};

Javascript

  // on toggle method
  // to check status of checkbox
  function onToggle() {
    // check if checkbox is checked
    if (document.querySelector('#my-checkbox').checked) {
      // if checked
      console.log('checked');
    } else {
      // if unchecked
      console.log('unchecked');
    }
  }

HTML

纯javascript:

const checkbox=document.getElementById（'myCheckbox'））
复选框.addEventListener（'change'，（事件）=>{
if（event.currentTarget.checked）{
警报（“已检查”）；
}否则{
警报（“未检查”）；
}
})

我的复选框：

试试看

功能更改（复选框）{
totalCost.value=checkbox.checked？10:计算（）；
}
函数计算（）{
返回其他值*2；
}

input{display:block}

复选框：
总成本：
其他：

我知道这似乎是一个很好的答案，但我把它放在这里是为了将来能帮助其他人

假设您正在使用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>

HTML:



JS:

功能手柄更改（e）{
const{checked}=e.target；
}
Checkboxid.Checked==true/false{Write your event}。如果用户使用键盘怎么办？它是strage，但仍然是click。实际上，当您使用标签切换复选框时，它甚至会被触发。但是你最好使用“改变”事件！“更改”事件的目的是：双击怎么样？现在是两次单击，不是吗？如果用户使用键盘？在这里可以测试所有不同的方式：点击、键盘、标签和快捷键。它们都会触发Firefox中的事件。不幸的是，当复选框状态通过JavaScript.lol更改时，不会触发该事件，请使用JavaScript$（“#checkbox”）.attr（'checked'，'checked'）$（“#复选框”）。单击（）；您应该使用onchange，它是专门为OP的用例设计的。（感谢下面的ReeCube链接）developer.mozilla.org/en-US/docs/Web/Events/change
<!-- 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>