Javascript 单击复选框时动态隐藏/显示文本框

在JQ做了一点调查之后，我更新了这个问题，因为它让一些人不高兴，没错，举手！单击复选框时，相应的内容应可见，反之亦然。我怎么做？ 谢谢

JQ:

 $(document).ready(function(){
        $('div.accessories div.acc-wrapper input:checkbox').click(function(event) {

            if($(this).prop('checked')) {
                $('div.accessories div.acc-wrapper div.field').show();
            } else {
                $('div.accessories div.acc-wrapper div.field').hide();
            }

        });
    });

<div class="accessories">
    <div class="acc-wrapper">
        <label>Row 1</label>
        <input type="checkbox" id="cname_1" name="abc" value="1" />
        <br />
        <div class="field" style="display:none;">
            <label>Name</label>
            <input type="text" id="name_1" name="name" value="" />
            <label>Surname</label>
            <input type="text" id="surname_2" name="surname" value="" />
        </div>
    </div>

    <div class="acc-wrapper">
        <label>Row 2</label>
        <input type="checkbox" id="cname_2" name="abc" value="1" />
        <br />
        <div class="field" style="display:none;">
            <label>Name</label>
            <input type="text" id="name_2" name="name" value="" />
            <label>Surname</label>
            <input type="text" id="surname_2" name="surname" value="" />
        </div>
    </div>

    <div class="acc-wrapper">
        <label>Row 3</label>
        <input type="checkbox" id="cname_3" name="abc" value="1" />
        <br />
        <div class="field" style="display:none;">
            <label>Name</label>
            <input type="text" id="name_3" name="name" value="" />
            <label>Surname</label>
            <input type="text" id="surname_3" name="surname" value="" />
        </div>
    </div>
</div>

HTML:

 $(document).ready(function(){
        $('div.accessories div.acc-wrapper input:checkbox').click(function(event) {

            if($(this).prop('checked')) {
                $('div.accessories div.acc-wrapper div.field').show();
            } else {
                $('div.accessories div.acc-wrapper div.field').hide();
            }

        });
    });

<div class="accessories">
    <div class="acc-wrapper">
        <label>Row 1</label>
        <input type="checkbox" id="cname_1" name="abc" value="1" />
        <br />
        <div class="field" style="display:none;">
            <label>Name</label>
            <input type="text" id="name_1" name="name" value="" />
            <label>Surname</label>
            <input type="text" id="surname_2" name="surname" value="" />
        </div>
    </div>

    <div class="acc-wrapper">
        <label>Row 2</label>
        <input type="checkbox" id="cname_2" name="abc" value="1" />
        <br />
        <div class="field" style="display:none;">
            <label>Name</label>
            <input type="text" id="name_2" name="name" value="" />
            <label>Surname</label>
            <input type="text" id="surname_2" name="surname" value="" />
        </div>
    </div>

    <div class="acc-wrapper">
        <label>Row 3</label>
        <input type="checkbox" id="cname_3" name="abc" value="1" />
        <br />
        <div class="field" style="display:none;">
            <label>Name</label>
            <input type="text" id="name_3" name="name" value="" />
            <label>Surname</label>
            <input type="text" id="surname_3" name="surname" value="" />
        </div>
    </div>
</div>

一排


名称
姓
第2排


名称
姓
第3排


名称
姓

您可以使用jquery通过

hide（）

和

show（）

方法隐藏和显示任何事件中的任何组件

例如：

$("#<your component id here>").click(function() {
     $('#<your component id here>').hide();
});

$（“#”）点击（函数（）{
$（'#'）。隐藏（）；
});

这可能非常适合您：

$("#checkboxID").change(function(){
    $("#textboxID").toggle();
});

在显示和隐藏之间自动切换，并尝试使用更改（函数（）{}）；而不是单击功能，因为您希望在取消选中时再次显示它。