显示多个已选中复选框的值

时间:2013-12-02 08:43:42

标签: jquery html input accordion

我需要jQuery的帮助。

我有一个带文字和复选框的easyui手风琴,在每个手风琴中我有多个输入。输入的值从php数组中读取。

我想在选中时显示每个输入的值(未选中隐藏值)。

并显示span中的所有值,当前类.values以逗号分隔。我有这个问题,因为我不知道如何显示所有值..

我试过这个

 $('#sub_number').on('change', function () {
     var val = this.checked ? this.value : '';
     $('.values').html(val);
 });

但它没有用,我不知道我应该在jQuery中使用输入id,父div id还是输入选择器。你应该帮我解决这个问题吗?

我的代码

<span class="values"></span>
<div id='easyui-tabs'>
    <div id="tab9081">
        <div class="group easyui-accordion">
            <div class="subgroup" title="1">
                <p><input type="checkbox" id="sub_number" value="1.a"/><label>1233</label></p>
                <p><input type="checkbox" id="sub_number" value="1.b"/><label>3444</label></p>
                <p><input type="checkbox" id="sub_number" value="1.c"/><label>eee</label></p>
                <p><input type="checkbox" id="sub_number" value="1.e"/><label>dede</label></p>
                <p><input type="checkbox" id="sub_number" value="1.f"/><label>eded</label></p>
            </div>
            <div class="subgroup" title="2">
                <p><input type="checkbox" id="sub_number" value="2.a"/><label>eded</label></p>
                <p><input type="checkbox" id="sub_number" value="2.b"/><label>deded</label></p>
                <p><input type="checkbox" id="sub_number" value="2.c"/><label>dede</label></p>
                <p><input type="checkbox" id="sub_number" value="2.d"/><label>frf</label></p>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

使用:

$("input[type=checkbox]").on('change', function () {
 var val = this.checked ? this.value : '';
 $(this).parent().html(val);
});

检查我的小提琴的工作:http://jsfiddle.net/VFn2M/

您的示例包含许多具有相同ID(sub_number)的元素。 id必须在整个文档中是唯一的。如果不是这种情况,请改用类。