Question

这是我的代码：

<div class="values"><span>Labels :</span></div>
<div id='main'>
    <div class="data">
        <div class="values">
            <div>
                <p><label>a</label><input type="checkbox" value="1"/></p>
            </div>
            <div>
                <p><label>b</label><input type="checkbox" value="2"/></p>
            </div>
            <div>
                <p><label>c</label><input type="checkbox" value="3"/></p>
            </div>
        </div>
    </div>
    <div class="data">
        <div class="values">
            <div>
                <p><label>d</label><input type="checkbox" value="1"/></p>
            </div>
            <div>
                <p><label>e</label><input type="checkbox" value="2"/></p>
            </div>
            <div>
                <p><label>f</label><input type="checkbox" value="3"/></p>
            </div>
        </div>

    </div>
</div>

标签和输入是动态生成的。我想在所有选中的输入中显示div .values中用逗号分隔的标签的值。输入检查/取消选中时隐藏显示。

http://jsfiddle.net/2gy67/4/

JS

$(document).ready(function() {
    $("input[type=checkbox]:checked").click(function () {
    var values = $("input label").map(function () {
        return $(this).text();
    }).get().join(',');
    $('.values ').text(values)
     console.log(values);
 });
 updateTitle(values);
    });

有人可以帮我完成这项工作吗？ ...

Answer 1

改变这个：

$("input label").map(function () {

到此：

$(":checked").siblings('lable').map(function () {

将事件委托给最近的静态父级，事件应为change：

 $(document).on('change', ':checkbox', function () {

注意：

你发布了错误的小提琴链接。

Answer 2

您需要动态添加元素的事件委派。

 $(document).on('click','input[type=checkbox]:checked',function () {
     var values = $('input:checked').siblings('label').map(function () {
     return $(this).text();
 }).get().join(',');
 $('.values ').text(values)
 console.log(values);
});

Answer 3

尝试

<div class="values"><span>Labels :</span><span class="selected"></span>

然后

jQuery(function ($) {
    $('#main input[type="checkbox"]').change(function () {
        var selected = $('#main input[type="checkbox"]').filter(':checked').map(function () {
            return $.trim($(this).prev().text());
        }).get();
        $('.values .selected').text(selected.join(', '))
    })
})

演示：Fiddle

Answer 4

@ Arun P Johny谢谢，代码很棒。但是在我的php网站上，当我在父div中输入和标签时，当我选中复选框时，我只有空格和逗号。

这样的事情：

<div class="values"><span>Labels :</span><span class="selected"></span>
</div>
<div id='main'>
    <p>
    <label>f</label>
    <input type="checkbox" value="1" />
    </p>
    <div class="data">
        <div class="values">
            <div>
                <p>
                <label>a</label>
                <input type="checkbox" value="1" />
                </p>
            </div>
            <div>
                <p>
                <label>b</label>
                <input type="checkbox" value="2" />
                </p>
            </div>
            <div>
                <p>
                <label>c</label>
                <input type="checkbox" value="3" />
                </p>
            </div>
        </div>
    </div>
    <div class="data">
        <div class="values">
            <div>
                <p>
                <label>d</label>
                <input type="checkbox" value="1" />
                </p>
            </div>
            <div>
                <p>
                <label>e</label>
                <input type="checkbox" value="2" />
                </p>
            </div>
        </div>
    </div>
    <p>
    <label>h</label>
    <input type="checkbox" value="1" />
    </p>
</div>

JS

jQuery(function ($) {
    $('#main input[type="checkbox"]').change(function () {
        var selected = $('#main input[type="checkbox"]').filter(':checked').map(function () {
            return $.trim($(this).prev().text());
        }).get();
        $('.values .selected').text(selected.join(', '))
    })
})

小提琴：click

并且在HTML中它工作正常但是当输入检查标签dipslay的罚款a，b，c，d并且当把代码放入我的php网站时我有空白区域由commna分隔,,,

当我用$（document）.ready（function（）{}）中的代码刷新页面时，如何更改jquery触发器; ，我失去了价值观。刷新页面后如何保留标签值？

通过jquery获取动态标签值

4 个答案:

注意：