JavascriptcheckboxonChange

我有一个表单中的checkbox,我希望它按照以下情况工作:

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

所以基本上,我需要的地方,当我检查checkbox,我做了一件事,当我取消选中,我做了另一个。

 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事件,因为每当点击一个checkbox实际上改变它。

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

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

以下解决scheme使用jQuery。 假设您有一个checkbox,其ID为checkboxId

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

通过它的id引用checkbox,而不是用#将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

<input id="my-checkbox" type="checkbox" onclick="onToggle()">