Question

我在jquery树中有一个UL复选框。我想显示以逗号分隔的列表，其中列出了在整个列表下方检查过的列表（作为用户可视地查看已检查的所有项目的一种方式）。我怎么用jquery做这个？我注意到从哪里开始。这是我的HTML：

<ul>
          <li><span>
            <input type="checkbox" value="Item 1" id="Item1"/>
            <label>Item 1</label>
            </span>
            <ul>
              <li><span>
                <input type="checkbox" value="Item 1.0" id="Item1-0"/>
                <label>Item 1.0</label>
                </span>
                <ul>
                  <li><span>
                    <input type="checkbox" value="Item 1.0.0" id="Item1-0-0"/>
                    <label>Item 1.0</label>
                    </span></li>
                </ul>
              </li>
              <li><span>
                <input type="checkbox" value="Item 1.1" id="Item1-1"/>
                <label>Item 1.1</label>
                </span></li>
              <li><span>
                <input type="checkbox" value="Item 1.2" id="Item1-2"/>
                <label>Item 1.2</label>
                </span>
                <ul>
                  <li><span>
                    <input type="checkbox" value="Item 1.2.0" id="Item1-2-0"/>
                    <label>Item 1.2.0</label>
                    </span> </li>
                </ul>
              </li>
            </ul>
          </li>
<ul>
<div class="currently-selected">
    Currently Selected:
    <span>Item 1</span>,<span>Item 2</span>
</div>

Answer 1

尝试以下代码

<强> DEMO

$("input[type=checkbox]").on("change", function(){
    $(".currently-selected").html("Currently Selected:");
    var arrTemp = [];

    $("input[type=checkbox]:checked").each(function(ind, val){
         arrTemp.push("<span>" + $(val).val() + "</span>");
    });

    $(".currently-selected").append(arrTemp.join());
});

显示选中复选框的值列表

1 个答案: