Question

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
           $("input").click(function(){
             $("p").toggle(500);
           });
        });

        </script>
    </head>
    <body>
        <label class="checkbox">
            <input type="checkbox" id="checkbox" name="checkbox" value="ON"/>  Secure E-mail
        </label>

        <p>This is another small paragraph.</p>
    </body>

</html>

此处我想要切换的文字已经显示。

我的要求是，只有当我选中复选框时，才会显示文本。否则它应该保持隐藏状态救命啊！

- 谢谢你

Answer 1

将元素的默认显示设置为无：p{display:none;}

另外，请确保只切换所需的单个元素，而不是所有<p>元素

此处的代码示例：http://jsfiddle.net/JXpg4/

Answer 2

处理默认状态的一种方法是在注册处理程序后手动触发更改事件，以便设置元素的初始状态

$(document).ready(function () {
    $("input").change(function () {
        $("p").toggle(this.checked);
    }).change();
});

演示：Fiddle

Answer 3

你能试试吗，

 $(document).ready(function(){
       $('p').hide();
       $("input[type='checkbox']").click(function(){
         $("p").toggle();
       });
    });

http://jsfiddle.net/rGyRW/1/

Answer 4

请检查，它的工作情况，你需要添加p {display：none}

文本通过jQuery在HTML中切换

4 个答案: