显示选定复选框的值的列表

hbowman 发表于 Dev

霍夫曼

我在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>

拉什敏（Rashmin Javiya）

试试下面的代码

演示

$("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());
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。