Question

默认情况下会选中复选框。如果未选中，则应隐藏文本。我如何在jquery中隐藏或显示文本？

HTML：

    <div class="check">
<p><input type="checkbox" value="Name" id="name" checked /> <label for="name">Name</label></p>  
<p><input type="checkbox" value="Reference " id="reference" checked /> <label for="reference">Reference</label></p>
    </div>

    <div id="nametxt"> Show Name TEXT </div>
    <div id="reftxt"> Show Ref TEXT </div>

Answer 1

将<div id="reftxt">的ID更改为<div id="referencetxt">然后您可以执行此操作：

$('div.check input:checkbox').bind('change',function(){
    $('#'+this.id+'txt').toggle($(this).is(':checked'));
});

如果更改事件被点击或有人使用键盘选中/取消选中复选框，则会触发更改事件。

只要文本div的ID始终为checkbox ID + 'txt'且位于div.check，那么这也将处理这些问题。当您获得更多复选框时，不必重复自己。

Answer 2

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $("#name").click(function() {
            if($('#name:checked').length) {
                $("#nametxt").show();
            } else {
                $("#nametxt").hide();
            }
        });

        $("#reference").click(function() {
            if($('#reference:checked').length) {
                $("#reftxt").show();
            } else {
                $("#reftxt").hide();
            }
        });
    })
</script>

Answer 3

如果未选中复选框，则如何通过Jquery显示消息，

您必须勾选站点框以接受。

使用jquery取消选中复选框时隐藏文本

3 个答案: