Question

我的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
    $("body").on("click",".mes_sel",function(){
        if($(".mes_sel:checked").length==0){
            alert("Checked");
        }
        else alert("Not Checked");
    });
});
</script></head>
<body>
<input type="checkbox" class="mes_sel">
</body>
</html>

在取消选中文本框时会发出警报，因为在检查复选框之前onclick正在运行。如何在检查/取消选中输入后运行click事件

Answer 1

使用change：

$(function(){
    $(".mes_sel").on("change", function(){
        if($(this).is(':checked')){
            alert("Checked");
        } else {
            alert("Not Checked");
        }
    });
});

Demo

Answer 2

请改为尝试：

$("body").on("click", ".mes_sel", function() {
    if ($(this).is(":checked")) {
        alert("Checked");
    }
    else alert("Not Checked");
});

<强> jsFiddle example

Answer 3

我曾经遇到过这个问题 - 我还发现不同的浏览器处理的方式不同。如果我没记错的话，Chrome是最糟糕的罪犯。

这不一定是最好的解决方案，但你可以为每个复选框添加一个自定义属性，比如说“isChecked”，然后将你的函数基于这个属性，如下所示：

if ($("mes_sel").attr("isChecked") == "true") { ... }

就像我说的那样，不是最好的解决方案，因为您必须手动翻转“isChecked”属性才能与复选框的实际检查值保持一致，但如果没有更优雅的效果对您有用，它将会起作用。

如果你想要一个这样的例子，请查看这个jsFiddle：

http://jsfiddle.net/NathanFriend/GAP2j/

这会将常规单选按钮变为“可切换”单选按钮 - 由于浏览器执行onclick事件的方式不同，我不得不使用此自定义属性方法。

如何在元素的默认行为后运行单击函数

3 个答案: