Question

我在表单上有一个复选框，默认情况下会像往常一样取消选中。现在我想对此复选框的已选中和未选中状态执行两个单独的操作。

这是我的复选框：

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

这是我的剧本：

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

它只是警告未经检查!!什么是最好的方法。

Answer 1

我们可以使用JavaScript，不需要jQuery。只需传递已更改的元素，让JavaScript处理它。

<强> HTML

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

<强> JS

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

Demo Here

Answer 2

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

JS：

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

Answer 3

问题是你如何附加监听器：

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

内联侦听器实际上包含在一个函数中，该函数使用 this 作为元素调用。该函数然后调用 doalert 函数，但不设置其 this ，因此它将默认为全局对象（浏览器中的窗口）。

由于窗口对象没有已检查属性，this.checked始终解析为false。

如果您希望 doalert 中的 this 成为元素，请使用 addEventListener 附加侦听器：

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

或者如果您希望使用内联侦听器：

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

Answer 4

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

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

然后您也可以从复选框中删除onchange="doalert(this.id)"：）

修改

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

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

Answer 5

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

HTML

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

JS

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

Answer 6

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

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

Answer 7

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

（要了解问题和情况，请阅读：Defined function is "Not defined"。）

因此，您有3个选择：

1（具有上述缺点）

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

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

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>

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

7 个答案:

HTML

JS