我需要检查一个检查箱的检查财产,并使用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>

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


当前回答

虽然您为您的问题提出了一个JavaScript解决方案(在检查时显示一个文本框),但这个问题只能通过CSS解决。

假设你有以下HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

您可以使用以下 CSS 来实现所需的功能:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

对于其他场景,您可能会考虑适当的CSS选择器。

这里有一个Fiddle来展示这种方法。

其他回答

使用点击事件处理器对检查箱属性是不可靠的,因为检查的属性在执行事件处理器本身时可能会发生变化!

理想情况下,您希望将代码放入变更事件交易器中,因为它每当检查箱的值发生变化时都会被释放(无论它是如何进行的)。

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});

我有相同的问题,没有一个发布的解决方案似乎工作,然后我发现这是因为ASP.NET将检查箱控制作为一个SPAN与INPUT内部,所以检查箱 ID实际上是一个SPAN的ID,而不是一个INPUT,所以你应该使用:

$('#isAgeSelected input')

而不是

$('#isAgeSelected')

然后,上面列出的所有方法都应该工作。

由于 jQuery 1.6, jQuery.attr() 的行为已经改变,用户被鼓励不要使用它来恢复一个元素的检查状态。

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

另外两种可能性是:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

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

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

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

你可以使用平坦的JavaScript,如下:

document.getElementById('checkboxOption').addEventListener('click', event => console.log(event.target.checked) ); <label><input type="checkbox" id="checkboxOption">Check Option</label>