jQuery-选中第一个复选框时显示第二个复选框

Question

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

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

如果我单击红色表示“第一”，则什么也不会发生。 如果我从第一个复选框中删除了勾号，则会隐藏蓝色的“第二个”框。

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

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

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

Java脚本

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

您可以将div隐藏在“ documentReady”上，也可以添加样式（display：none）

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

});

要么

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