JQuery - 第一次勾选时显示第二个复选框答案

【问题标题】：JQuery - show second checkbox when ticking firstJQuery - 第一次勾选时显示第二个复选框
【发布时间】：2016-01-26 08:27:36
【问题描述】：

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

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

如果我点击红色的“1st”，那么什么也不会发生。如果我从第一个复选框中删除勾号，蓝色的“第二个”框将被隐藏。

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

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

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/

【问题讨论】：

要么显式隐藏#r2（通过添加样式），要么在页面加载时触发您的更改处理程序 - jsfiddle.net/d2ykzjvg/1

标签： javascript jquery

【解决方案1】：

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

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

为了在页面加载时隐藏它

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

或者在下面添加这个css：

#r2{
     display:none;
}

【讨论】：

【解决方案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/

【讨论】：

【解决方案5】：

您可以在“documentReady”上隐藏 div，也可以添加样式（显示：无）

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

});

或

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

【讨论】：