Question

我们一直在努力尝试选择复选框以在javascript中执行操作。

此时，我复制了http://jsfiddle.net/lesson8/RFxwp/的代码它不起作用。我甚至在jquery的支票中添加了。

<!DOCTYPE html>
<html>
    <head>
        <title>WHY</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            if (window.jQuery) {
                alert("jquery enabled");
            } else {
                alert("jquery broken");
            }

            $('#rollDiv :checkbox').click(function () {
                        var $this = $(this);
                        // $this will contain a reference to the checkbox
                        if ($this.is(':checked')) {
                            // the checkbox was checked 
                            alert('checked');
                        } else {
                            // the checkbox was unchecked
                            alert('unchecked');
                        }
                    });

        </script>
    </head>
    <body>
        <div id="rollDiv">
            <input checked="checked" type="checkbox">
            <input checked="checked" type="checkbox">
            <input checked="checked" type="checkbox">
            <input checked="checked" type="checkbox">
        </div>
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </body>
</html>

住在这里：http://mfurland.w3.uvm.edu/ical/test.html

它在http://validator.w3.org/check?uri=http%3A%2F%2Fmfurland.w3.uvm.edu%2Fical%2Ftest.html&charset=%28detect+automatically%29&doctype=Inline&group=0

处验证正常

我显然缺少某事，但不知道该检查什么。非常感谢您的帮助。

Answer 1

您需要在$(document).ready()中封装按钮点击方法，如下所示：

$(document).ready(function(){
    $('#rollDiv :checkbox').click(function () {
        var $this = $(this);
        // box  will contain a reference to the checkbox
        if ($this.is(':checked')) {
             // the checkbox was checked 
             alert('checked');
        } else {
             // the checkbox was unchecked
             alert('unchecked');
        }
    });
});

Answer 2

检查这个小提琴：http://jsfiddle.net/marionebl/8M7z4/3/。

$(document).ready(function(){
    $('#rollDiv').find('input:checkbox').on('change', function () {
       alert($(this).is(':checked') ? 'checked' : 'unchecked');
    });
});

查看fiddle you gave as reference，您可以看到在左侧边栏的Frameworks & Extensions区域中设置了选项onDomReady。这会导致jsfiddle将提供的js代码包装到

中

$(function(){ ... });

相当于

$(document).ready(function(){ ... });

并且遗失在您的live version。

旁注：虽然倾听click事件对大多数用户都有效，但还有其他方法可以检查复选框，例如在屏幕阅读器上或通过js以编程方式。倾听change事件也会抓住这些案例，几乎在每种情况下都更安全。

Answer 3

$('#rollDiv :checkbox').click(function () {
    var $this = $(this);
    // $this will contain a reference to the checkbox
    if ($this.is(':checked')) {
        // the checkbox was checked 
        alert('checked');
    } else {
        // the checkbox was unchecked
        alert('unchecked');
    }
});

应该是：

$('#rollDiv input:checkbox').click(function () {
    var $this = $(this);
    // $this will contain a reference to the checkbox
    if ($this.is(':checked')) {
        // the checkbox was checked 
        alert('checked');
    } else {
        // the checkbox was unchecked
        alert('unchecked');
    }
});

'：复选框'是输入[type ='checkbox']的短代码。只有在您按照上述说明传递输入时，它才有效。

选择JS复选框警报

3 个答案: