我需要检查一个检查箱的检查财产,并使用jQuery进行检查财产的操作。

例如,如果年龄检查框被检查,那么我需要显示一个文本框进入年龄,否则隐藏文本框。

但下列代码默认返回虚假:

如果($('#isAgeSelected').attr('checked')) { $("#txtAge").show(); } 其他 { $("#txtAge").hide(); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="isAgeSelected"/> <div id="txtAge" style="display:none"> 年龄 已选择 </div>

如何成功查询已检查的房地产?


当前回答

我相信你可以这样做:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}

其他回答

这对我来说工作:

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});

如果您需要使用 CSS 类作为 jQuery 选择器,您可以执行以下操作:

$(document).ready(function () {
        $('.myOptionCheckbox').change(function () {            
            if ($(this).prop('checked') == true) {
                console.log("checked");           
            }
            else {
                console.log("unchecked");                
            }
        });
    });

它也适用于检查箱和无线电盒。

您可以尝试检查箱的变更事件,以跟踪:检查状态变更。

$("#isAgeSelected").on('change', function() { if ($("#isAgeSelected").is(':checked')) alert("checked"); other { alert("unchecked"); } }; <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="isAgeSelected" /> <div id="txtAge" style="display:none"> 年龄已选择 </div>

如何成功查询已检查的房地产?

检查箱 DOM 元素的检查属性将为您提供检查元素的状态。

考虑到您的现有代码,您可以这样做:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

但是,有一个更方便的方式来做到这一点,使用Toggle:

$('#isAgeSelected').click(功能() { $("#txtAge").toggle(this.checked); }; <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" id="isAgeSelected"/> <div id="txtAge" style="display:none"> 年龄是某种东西</div>

下面是一个例子,包括启动显示/隐藏,以匹配页面加载时检查箱的状态;考虑到Firefox在更新页面时记得检查箱的状态,但不会记得显示/隐藏的元素的状态。

$(function() {
    // initialise visibility when page is loaded
    $('tr.invoiceItemRow').toggle($('#showInvoiceItems').attr('checked'));
    // attach click handler to checkbox
    $('#showInvoiceItems').click(function(){ $('tr.invoiceItemRow').toggle(this.checked);})
});

(与此问题的其他答案的帮助)