Question

这是我目前坚持的简单例子。如果我点击第一个复选框，我试图显示第二个复选框。

在下面的示例中（演示：https://jsfiddle.net/d2ykzjvg/1/），您可以看到页面加载时会出现两个复选框。

如果我点击红色的那个＆＃34; 1st＆＃34;没有任何反应。如果我从第一个复选框中删除勾号，则蓝色＆＃34;第二个＆＃34;盒子是隐藏的。

如果我再次勾选红色的那个，则会出现蓝色的那个，并在我切换红色复选框时打开和关闭。

我不知道如何在页面首次加载时隐藏蓝色复选框。

HTML

    <form action="#" method="post">
        <div class="label label-danger">
            <label for="rev"><input id="rev" type="checkbox" name="rev" id="rev" value="y"> 1st</label>
        </div>
        <div class="label label-primary" id="r2">
            <label for="rev_inc"><input type="checkbox" name="rev_inc" id="rev_inc" value="y"> 2nd</label>
        </div>
    </form>

的Javascript

$(function() {

    $('#rev').change(function() {
        if($(this).is(":checked")) {
            $('#r2').show();
        }
    else{
            $('#r2').hide();
        }
    });

});

JSFiddle：https://jsfiddle.net/d2ykzjvg/1/

Answer 1

你应该像这样使用style="display:none"：

<label for="rev_inc"><input type="checkbox" name="rev_inc" id="rev_inc" value="y" style="display:none;"> 2nd</label>

为了在页面加载中隐藏它

Answer 2

您需要先隐藏第二个复选框

$(document).ready(function(){
    $('#r2').hide();
    $('#rev').change(function() {
        if($(this).is(":checked")) {
            $('#r2').show();
        }
        else {
            $('#r2').hide();
        }
    });
});

Answer 3

简单。只需在页面加载功能上添加$('#r2').hide();。

或者在下面添加这个css：

#r2{
     display:none;
}

Answer 4

在第二个div中添加内联样式，如下所示

 <div class="label label-primary" id="r2" style="display:none;">
        <label for="rev_inc"><input type="checkbox" name="rev_inc" id="rev_inc" value="y"> 2nd</label>
 </div>

更新了小提琴：https://jsfiddle.net/d2ykzjvg/2/

Answer 5

你可以在＆＃34; documentReady＆＃34;上隐藏div。或者你可以添加样式（显示：无）

$(function() {
    $('#r2').hide();
    $('#rev').change(function() {
        if ($(this).is(":checked")) {
            $('#r2').show();
        } else {
            $('#r2').hide();
        }
    });

});

或

<style>
 #r2 { display:none; }
</style>

JQuery - 首先勾选

5 个答案: