Javascript 对 html 表单上的复选框选中或未选中事件执行操作

perform an action on checkbox checked or unchecked event on html form

提问by shekoufeh

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.

它只是警告未选中！！什么是最好的方法来做到这一点。

回答by Shrinivas Pai

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

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

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");
  }
}

Demo Here

演示在这里

回答by RobG

The problem is how you've attached the listener:

问题是您如何附加侦听器：

<input type="checkbox" ...  onchange="doalert(this.id)">

Inline listeners are effectively wrapped in a function which is called with the element as this. That function then calls the doalertfunction, but doesn't set its thisso it will default to the global object (window in a browser).

内联侦听器有效地包装在一个函数中，该函数以this元素调用。然后该函数调用doalert函数，但不设置它的this，因此它将默认为全局对象（浏览器中的窗口）。

Since the window object doesn't have a checkedproperty, this.checkedalways resolves to false.

由于 window 对象没有check属性，所以this.checked总是解析为 false。

If you want thiswithin doalertto be the element, attach the listener using addEventListener:

如果你想这个内doalert是元素，附加使用监听器的addEventListener：

window.onload = function() {
  var input = document.querySelector('#g01-01');
  if (input) {   
    input.addEventListener('change', doalert, false);
  }
}

Or if you wish to use an inline listener:

或者，如果您想使用内联侦听器：

<input type="checkbox" ...  onchange="doalert.call(this, this.id)">

回答by guvenckardas

<form>
    syn<input type="checkbox" name="checkfield" id="g01-01" />
</form>

js:

js：

$('#g01-01').on('change',function(){
    var _val = $(this).is(':checked') ? 'checked' : 'unchecked';
    alert(_val);
});

回答by Reece Kenney

Have you tried using the JQuerychange event?

您是否尝试过使用JQuery更改事件？

$("#g01-01").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Then you can also remove onchange="doalert(this.id)"from your checkbox :)

然后你也可以onchange="doalert(this.id)"从你的复选框中删除:)

Edit:

编辑：

I don't know if you are using JQuery, but if you're not yet using it, you will need to put the following script in your page so you can use it:

我不知道您是否正在使用JQuery，但如果您还没有使用它，则需要将以下脚本放入您的页面中，以便您可以使用它：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

回答by Bhavesh Gohel

Given you use JQuery, you can do something like below :

鉴于您使用 JQuery，您可以执行以下操作：

HTML

HTML

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

JS

JS

function doalert() {
  if ($("#g01-01").is(":checked")) {
    alert ("hi");
  } else {
    alert ("bye");
  }
}

回答by john c. j.

The currently accepted answer doesn't always work.

当前接受的答案并不总是有效。

(To read about the problem and circumstances, read this: Defined function is "Not defined".)

（要了解问题和情况，请阅读：定义的函数是“未定义的”。）

So, you have 3 options:

因此，您有 3 个选择：

1 (it has above-mentioned drawback)

1（它有上述缺点）

<input type="checkbox" onchange="doAlert(this)">

<script>
function doAlert(checkboxElem) {
    if (checkboxElem.checked) {
        alert ('hi');
    } else {
        alert ('bye');
    }
}
</script>

2 and 3

2 和 3

<input type="checkbox" id="foo">

<script>
function doAlert() {
    var input = document.querySelector('#foo');

    // input.addEventListener('change', function() { ... });
    // or
    // input.onchange = function() { ... };
    input.addEventListener('change', function() {
        if (input.checked) {
            alert ('hi');
        } else {
            alert ('bye');
        }
    });
}

doAlert();
</script>

回答by Asad Palekar

If you debug your code using developer tools, you will notice that thisrefers to the window object and not the input control. Consider using the passed in id to retrieve the input and check for checkedvalue.

如果您使用开发人员工具调试代码，您会注意到它this指的是窗口对象而不是输入控件。考虑使用传入的 id 来检索输入并检查checked值。

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