Javascript复选框onChange

Question

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

如果有人检查它,textfield(totalCost)的值应该设置为10.然后,如果我返回并取消选中它,函数会根据表单中的其他参数calculate()设置值totalCost.

所以基本上,我需要的部分在哪里,当我选中复选框时我会做一件事,当我取消选中它时,我会做另一件事.

Answer 1

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

HTML

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

Answer 2

纯javascript:

const checkbox = document.getElementById('myCheckbox')

checkbox.addEventListener('change', (event) => {
  if (event.target.checked) {
    alert('checked');
  } else {
    alert('not checked');
  }
})

HTML:

My Checkbox: <input id="myCheckbox" type="checkbox" />

的jsfiddle:

https://jsfiddle.net/pfcymb4j/1/

Answer 3

如果您正在使用jQuery ..那么我可以建议以下内容:注意:我在这里做了一些假设

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

Answer 4

使用onclick事件,因为每次单击复选框实际上都会更改它.

Answer 5

HTML：

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

JS：

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

Answer 6

以下解决方案使用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
    }
});

Answer 7

通过其 id 引用复选框，而不是使用 # 将函数分配给 onclick 属性，而不是使用更改属性

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

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