Question

经过一些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();
            }

        });
    });

HTML：

<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>

Answer 1

您可以使用jquery进行隐藏，并使用hide()和show()方法在任何事件上显示任何组件.. !!!

例如：

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

Answer 2

这对你来说可能是完美的：

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

自动切换在显示和隐藏之间交替显示

选中复选框后动态隐藏/显示文本框

2 个答案: