jquery:如果选中复选框,则隐藏输入框

时间:2014-03-08 07:01:40

标签: jquery html

如果选中复选框,我试图隐藏名称的输入框:

if($(#1step).checked){
     $("input[username="true").hide
}

<input username="true">
<input type="checkbox" id="1step"><label>step1</label>

3 个答案:

答案 0 :(得分:4)

一些注意事项:

1)用引号' '或双引号" "

包裹您的值

2)使用$("input[username='true']")代替$("input[username="true")

3)使用<label>代替<lavel>

4)使用 change() 事件跟踪选中或取消选中复选框时

5)手动触发change事件,以确保在页面加载时正确设置了文本框的可见性

最终代码如下:

$(function () {
    $('#1step').change(function () {
        if ($('#1step').is(':checked')) {
            $("input[username='true']").hide();
        } else {
            $("input[username='true']").show();
        }
    }).change();
});

<强> Fiddle Demo

或者您可以将代码缩短为:

$(function () {
    $('#1step').change(function () {
        $("input[username='true']").toggle(this.checked);
    }).change();
});

<强> Fiddle Demo

答案 1 :(得分:3)

您需要让更改事件处理程序监听复选框的已检查状态的更改并相应地更新文本框的可见性(您可以使用.toggle()来设置它)。您还可以在添加处理程序后手动触发change()事件,以便正确设置文本字段的初始可见性

jQuery(function ($) {
    $('#1step').change(function () {
        $('input[username="true"]').toggle(this.checked)
    }).change();//initialize with correct display state
});

演示:Fiddle

答案 2 :(得分:3)

这样的事情:

$('#1step').change(function() {
    $("input[username='true']").toggle(this.checked);
}).change();

确保最初触发更改事件,以防HTML默认情况下使用checked =“true”。

演示:http://jsfiddle.net/z4LQG/