未选中时隐藏选中的复选框

Question

我有一个复选框和一个标签，一行上有一个文本字段。

当页面加载时复选框被选中，如果用户取消选中复选框，我希望删除该行。不是真正的 show/hide 因为我不需要重新显示未选中的复选框。

有什么快速的方法吗？我正在使用 JQuery 添加行，但如果未选中，我想删除该行。我正在使用追加，所以我想我想 'prepend' 或 'remove' 添加复选框和行。

<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});

$("#btn2").click(function(){
$("ul").append("<li><input type='checkbox' checked> Other Group 
&nbsp;<select><option>(HG) 1</option><option>(OG) 2</option>
<option>(OG) 3</option><option>(OG) 4</option><option>(OG) 
5</option></select> &nbsp;  <input type='text' name='fname' 
size='30'></li>");
});
});
</script>

HTML

其他组

已选择

<ul>
<li><input type="checkbox" id="vehicle1" name="vehicle1" 
value="Bike" checked>
<label for="vehicle1"> Rock Quarry Worker</label></li>
</ul>
<p>&nbsp;</p>
<style>
ul {

padding: 0;
list-style-type: none;
}
li {
    margin: 0 0 4px 0;
}
</style>

<p>Availble </p>
<form>
    <style>
        .space {li {
    margin: 0 0 4px 0;
}}
    </style>
<input type="checkbox" id="vehicle0" name="vehicle1" value="Bike" 
class="space"> <label for="vehicle1"> Row Boat Operator</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car" 
class="space">
<label for="vehicle2"> Window Washer</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> Zoo Keeper</label><br></form>
<p><button id="btn2" class="btn2">+</button> Add </p>


<p>&nbsp;</p>



<style>
    .btn2 {
        background-color: red;
        color:#FFF;
        font-size: 10pt;
        font-family:Impact, Haettenschweiler, "Franklin Gothic 
Bold", "Arial Black", "sans-serif";

        padding: 6px;

    }
</style>

Answer 1

您可以使用 removeChild(yourCheckbox) 删除复选框

未选中时隐藏选中的复选框

Hide Checked Checkbox when Unchecked

html

css

checkbox

hide