Показать значения нескольких отмеченных флажков

Мне нужна помощь в jQuery.

У меня есть easyui аккордеон с текстом и флажками, и в каждом аккордеоне у меня есть несколько входов. Значение входных данных считывается с помощью php-массивов.

Я хочу, чтобы на дисплее отображалось значение каждого входа (непроверено, скрывает значение).

И отобразите все значения в диапазоне с текущими значениями класса, разделенными запятой. И у меня проблема с этим, потому что я не знаю, как отображать все значения.

Я пробовал это

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

Но это не сработало, и я не знаю, должен ли я использовать идентификатор ввода или родительский идентификатор div или только селектор ввода в jQuery. Если вы поможете мне с этим кодом?

Мой код ниже

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