Скрыть отмеченный флажок, когда снят - PullRequest
0 голосов
/ 17 апреля 2020

У меня есть флажок метка, с текстовым полем в одной строке.

Когда страница загружается, флажок ПРОВЕРЕН, если пользователь ОТКЛЮЧИЛ флажок, я хочу, чтобы строка была удалена. На самом деле это не шоу / скрытие, так как мне не нужно повторно отображать непроверенный флажок.

Есть ли быстрый способ сделать это? Я использую JQuery для добавления строк, но если флажок снят, я хочу удалить строку. Я использую команду append, поэтому, я думаю, я хочу добавить или поставить флажок «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>

1 Ответ

0 голосов
/ 17 апреля 2020

Вы можете использовать removeChild(yourCheckbox), чтобы снять флажок

...