隐藏输入，直到选中复选框答案

【问题标题】：Hide an input until a checkbox has been checked隐藏输入，直到选中复选框
【发布时间】：2015-07-15 02:08:31
【问题描述】：

在以下表单中，如何在checkbox 之后隐藏<input> 标记并在选中checkbox 时显示它？

<ul style="list-style-type:none">
    <li>
        <input type="text" name="accountname" style="width:95%" class="field-style field-full align-none" placeholder="Company Name" />
    </li>
    <li>
        <label>Please fill in your contact information below</label>
        <input type="text" name="firstname" class="field-style field-split align-left" placeholder="First Name" />
        <input type="text" name="lastname" class="field-style field-split align-right" placeholder="Last Name" />
    </li>
    <li>
        <input type="text" name="address" class="field-style field-split align-left" placeholder="Street # and Name" />
        <select placeholder="Street Type" style="height:33" class="field-style field-split align-center">
            <option value="" disabled selected>Street Type</option>
            <option value="St.">Street</option>
            <option value="Rd.">Road</option>
            <option value="Way">Way</option>
        </select>
        <select placeholder="Direction" style="height:33" class="field-style field-split align-right">
            <option value="" disabled selected>Direction (If Applicable)</option>
            <option value="N">North</option>
        </select>
    </li>
    <li>
        <select placeholder="State" style="height:33" class="field-style field-split align-left">
            <option value="" disabled selected>State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
        </select>
        <input type="text" name="Street Name" placeholder="Zip Code" class="field-style field-split align-right" />
    </li>
    <li>
        <label>Telephone Number</label>
        <input type="text" class="tel-number-field" name="tel_no_1" value="" maxlength="4" />-
        <input type="text" class="tel-number-field" name="tel_no_2" value="" maxlength="4" />-
        <input type="text" class="tel-number-field" name="tel_no_3" value="" maxlength="10" />
    </li>
    <li>
        <input type="email" name="email" placeholder="E-Mail Address" />
    </li>
    <!-- Hide/show an input element below this checkbox -->
    <input type="checkbox" />
    </br>
    </br>
    <li>
        <button type="submit" style="width:95%">Submit Account</button>
    </li>
</ul>

【问题讨论】：

标签： javascript html css checkbox input

【解决方案1】：

仅使用 CSS 隐藏和显示兄弟元素

^{_{（有关本节未指定的更正的更多信息，请参阅下面的代码更正部分）}}

如果您希望能够在checkbox 之后显示和隐藏<input> 标记，则有一个CSS 解决方案。

只需在<li>标签上附加一个输入标签，然后按照checkbox的:checked状态，使用CSS~ General sibling combinator如以下代码隐藏和显示<input>标签

input[type="checkbox"] ~ input {
    display: none;
}
input[type="checkbox"]:checked ~ input {
    display: inline-block;
}

<ul style="list-style:none"> 
    <li>
        <input type="checkbox" /> 
        <br /><br />
        <input type="text">
    </li>
</ul>

代码更正

<ul> 标签中允许的唯一直接后代元素是<li> 标签。

也没有 </br> 标签之类的东西，但是有一个带有可选（在 HTML4 和 HTML5 中）自结束标志 <br /> 的 <br> 标签。

这意味着下面的代码应该改变

<ul>
    ...
    <input type="checkbox" />
    </br></br>
    ...
</ul>

到下面的代码

<ul>
    ...
    <li>
        <input type="checkbox" />
        <br /><br />
    </li>
    ....
</ul>

【讨论】：

【解决方案2】：

只需使用 onchange 方法启用和禁用输入字段

enter code here

 <input id = chkbox type="checkbox" onchange= chk_onchange();/>
 <script>
 function chk_onchange(){

 if(document.getElementById("chkbox").checked)
 enable the field
 else
 disable the filed
 }
</script>

【讨论】：