对html表单上的复选框选中或未选中的事件执行操作 [英] perform an action on checkbox checked or unchecked event on html form

问题描述

我有一个默认情况下未选中的窗体上的复选框。现在我想在这个复选框的已选中或未选中状态下执行两个单独的操作。

I have a checkbox on a form which is unchecked by default as usual. now I want to perform two separated actions on checked and unchecked state of this checkbox.

这是我的复选框：

this is my checkbox:

<form>
    syn<input type="checkbox" name="checkfield" id="g01-01"  onchange="doalert(this.id)"/>
</form>

这是我的脚本：

and this is my script:

function doalert(id){
  if(this.checked) {
     alert('checked');
  }else{
     alert('unchecked');
  }
}

它只是警告不变！什么是最好的办法。

it just alerts uncheched!! what is the best way to do that.

推荐答案

我们可以使用JavaScript来做到这一点，不需要jQuery。只需传递已更改的元素并让JavaScript处理它即可。

We can do this using JavaScript, no need of jQuery. Just pass the changed element and let JavaScript handle it.

HTML

HTML

<form id="myform">
    syn<input type="checkbox" name="checkfield" id="g01-01"  onchange="doalert(this)"/>
</form>

JS

JS

function doalert(checkboxElem) {
  if (checkboxElem.checked) {
    alert ("hi");
  } else {
    alert ("bye");
  }
}

在此演示

这篇关于对html表单上的复选框选中或未选中的事件执行操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！