Question

以下是代码：

<div id="product">
<b>CHOOSE PRODUCT:<br></b>
<input type="checkbox" name="fruits" value="1">Orange<br>
<input type="checkbox" name="fruits" value="2">Grapes<br>
<input type="checkbox" name="fruits" value="3">Apple<br>
<input type="checkbox" name="fruits" value="4">Guava<br>
</div>
<div id="description">

</div>
<script>
$(document).ready(function(){
    $('input[type="checkbox"]').change(function(event) {
        var val=$(this).attr("value");
        $('#description').append('<div id='+val+'><input type="text" name="id[]" value="'+val+'"><input type="text" name="desc" value=""></div>');
    });
});
</script>

使用此代码，每当用户选择一个复选框时，都会在 description div中创建一个div，其中id为所选复选框的值。

现在我需要一个功能，如果用户取消选中任何选中的元素，也应删除相应的div。

Answer 1

<div id="product">
<b>CHOOSE PRODUCT:<br></b>
<input type="checkbox" name="fruits" value="1">Orange<br>
<input type="checkbox" name="fruits" value="2">Grapes<br>
<input type="checkbox" name="fruits" value="3">Apple<br>
<input type="checkbox" name="fruits" value="4">Guava<br>
</div>
<div id="description">

</div>
<script>
$(document).ready(function(){
    $('input[type="checkbox"]').change(function(event) {
        var val=$(this).attr("value");
        if ( $(this).is( ":checked" ) ) {
            $('#description').append('<div id='+val+'><input type="text" name="id[]" value="'+val+'"><input type="text" name="desc" value=""></div>');
        } else {
            $("#" + val).remove();
        }
    });
});
</script>

如何根据PHP中的复选框选择添加/删除Div

1 个答案: