Question

嘿伙计们，所以我希望你能帮助解决我遇到的问题，当我点击复选框将复选框值附加到另一个div中的li元素时，我需要的几乎就是我所需要的。检查下面的html。提前谢谢。

<div class="heading">
    <p><a href="#">Experiences</a></p>
    <a href="#" target="_self">modify</a>                
</div><!--heading-->
<div class="add-filters">
    <div class="inner">
        <h4 class="title-filtery">Filtery By:</h4>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td><input type="checkbox" id="adventure" name="adventure" /> <label for="adventure">Adventure</label></td>
                <td><input type="checkbox" id="diving" name="diving" /> <label for="diving">Diving</label></td>
            </tr>
            <tr>
                <td><input type="checkbox" id="beach" name="beach" /> <label for="beach">Beach</label></td>
                <td><input type="checkbox" id="ecotour" name="ecotour" /> <label for="ecotour">Eco-Tour</label></td>
            </tr>
            <tr>
                <td><input type="checkbox" id="boating" name="boating" /> <label for="boating">Boating</label></td>
                <td><input type="checkbox" id="family" name="family" /> <label for="family">Family</label></td>
            </tr>
            <tr>
                <td><input type="checkbox" id="canoe" name="canoe" /> <label for="canoe">Canoe/Kayak/Raft</label></td>
                <td></td>
            </tr>
        </table>
        <div class="btn-holder clearfix">
            <input type="button" class="btn-cancel" value="" />
            <input type="button" class="btn-update" value="" />
        </div>
    </div>
</div><!-- filters -->
<div class="hidden-filters">
    <p>Filtering by:</p>
    <ul>

    </ul>
</div><!-- hidden-filters -->

Answer 1

执行此操作的一种方法，~~但请注意，我没有介绍如何在/取消选中~~时从列表中删除插入的li元素（请参阅{{ 1}}）：

hr

Demo at JS Fiddle

<小时/> 如果

$(document).ready(
    function(){
        $('input:checkbox').change(
            function(){
                if ($(this).is(':checked')) {
                 $('<li />').appendTo('#div ul').text($(this).val());   
                }
            }); 
    });

未选中，则编辑提供删除工具：

checkbox

Demo at JS Fiddle

Answer 2

试试这个 -

$('input[type="checkbox"]').click(function(){
  if($(this).is(':checked')){
     var val = $(this).val();
     $('.hidden-filters > ul').append('<li>'+val+'</li>');
  } 
});

Answer 3

$(":checkbox").click(function(){
    $(".hidden-filters").append("<li>" + $(this).val() + "</li>");
});

如何将复选框值附加到li

3 个答案: