事实上,我更喜欢改变事件。

$('#isAgeSelected').change(function() {
    $("#txtAge").toggle(this.checked);
});

饰 Fiddle

如果您的 HTML 标签是:

<input type="checkbox"  />

特斯拉使用:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

如果使用POP:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2)如果您的HTML标签是:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

特斯拉使用:

$(element).attr("checked") // Will return checked whether it is checked="true"

Prop 使用:

$(element).prop("checked") // Will return true whether checked="checked"

if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}

我在Firefox 9.0.1中确认了下列工作,以捕捉检查箱邮件的状态变更:

$("#mycheckbox").change(function() {
    var value = $(this).prop("checked") ? 'true' : 'false';                     
    alert(value);
});

我决定发表一个答案,关于如何在没有jQuery的情况下做同样的事情。

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

首先,您将两个元素通过他们的 ID. 然后,您将对检查箱的交换事件分配一个功能,检查检查是否已检查,并适当设置年龄文本字段的隐藏属性。

下面是你试试的技巧。

添加

如果跨浏览器兼容性是一个问题,那么我建议将CSS显示属性设置为无与伦比。

elem.style.display = this.checked ? 'inline' : 'none';

缓慢但跨浏览器兼容。

我使用谷歌的CDN,还有很多CDN可以选择。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

如果当前点击的检查框被检查,则将关闭所有其他,并启用当前的,如果当前的未检查,则将重新启用所有检查框。

<script type="text/javascript">
    $(document).ready(function() {

        var checkbox_selector = '.mycheck input[type=checkbox]';

        $(checkbox_selector).click(function() {
            if ($($(this)).is(':checked')) {

                // Disable all checkboxes
                $(checkbox_selector).attr('disabled', 'disabled');

                // Enable current one
                $($(this)).removeAttr('disabled');
            }
            else {
                // If unchecked open all checkbox
                $(checkbox_selector).removeAttr('disabled');
            }
        });
    });
</script>

简单的测试方式

<form method="post" action="">
    <div class="mycheck">
        <input type="checkbox" value="1" /> Television
        <input type="checkbox" value="2" /> Computer
        <input type="checkbox" value="3" /> Laptop
        <input type="checkbox" value="4" /> Camera
        <input type="checkbox" value="5" /> Music Systems
    </div>
</form>

输出屏幕:

此分類上一篇