我需要检查一个检查箱的检查财产,并使用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>
如何成功查询已检查的房地产?
当前回答
我使用谷歌的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>
输出屏幕:
此分類上一篇
其他回答
事实上,我更喜欢改变事件。
$('#isAgeSelected').change(function() {
$("#txtAge").toggle(this.checked);
});
饰 Fiddle
我决定发表一个答案,关于如何在没有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';
缓慢但跨浏览器兼容。
if($('#isAgeSelected').prop('checked')) {
// do your action
}
使用点击事件处理器对检查箱属性是不可靠的,因为检查的属性在执行事件处理器本身时可能会发生变化!
理想情况下,您希望将代码放入变更事件交易器中,因为它每当检查箱的值发生变化时都会被释放(无论它是如何进行的)。
$('#isAgeSelected').bind('change', function () {
if ($(this).is(':checked'))
$("#txtAge").show();
else
$("#txtAge").hide();
});
有很多方法可以检查一个检查箱是否被检查:
如何使用 jQuery 查看
if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))
查看例子或文档:
http://api.jquery.com/attr/ http://api.jquery.com/prop/
