javascript - 无法编辑 HTML 时如何选择父复选框？

Question

首先我想说我已经搜索了可能的解决方案并发现了类似的问题。但问题是我无法控制 HTML 部分。

列表是由 wp_types 插件动态生成的，因此，我无法将自定义类添加到 HTML 以使用 JS 更改特定值。

这是我的代码:

<ul class="wpt-form-set wpt-form-set-checkboxes wpt-form-set-checkboxes-event-type" data-level="0"><li class="tax-corporate-events tax-event-type-52">
<input type="checkbox" id="cred_form_6568_1-checkbox-30-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-30-1438779193" data-wpt-name="event-type[]" value="52" data-parent="-1" data-value="CORPORATE EVENTS" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-30-1438779193">CORPORATE EVENTS</label>
</li>

<li class="tax-children-of-52"><ul class="wpt-form-set-children wpt-form-set-children-level-1" data-level="1"><li class="tax-after-dinner-shows tax-event-type-87">
<input type="checkbox" id="cred_form_6568_1-checkbox-31-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-31-1438779193" data-wpt-name="event-type[]" value="87" data-parent="52" data-value="AFTER DINNER SHOWS" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-31-1438779193">AFTER DINNER SHOWS</label>
</li>

<li class="tax-award-ceremonies tax-event-type-92">
<input type="checkbox" id="cred_form_6568_1-checkbox-32-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-32-1438779193" data-wpt-name="event-type[]" value="92" data-parent="52" data-value="AWARD CEREMONIES" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-32-1438779193">AWARD CEREMONIES</label>
</li>

<li class="tax-background-music tax-event-type-86">
<input type="checkbox" id="cred_form_6568_1-checkbox-33-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-33-1438779193" data-wpt-name="event-type[]" value="86" data-parent="52" data-value="BACKGROUND MUSIC" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-33-1438779193">BACKGROUND MUSIC</label>
</li>

<li class="tax-comperes tax-event-type-91">
<input type="checkbox" id="cred_form_6568_1-checkbox-34-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-34-1438779193" data-wpt-name="event-type[]" value="91" data-parent="52" data-value="COMPERES" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-34-1438779193">COMPERES</label>
</li>

<li class="tax-dance-the-night-away tax-event-type-89">
<input type="checkbox" id="cred_form_6568_1-checkbox-35-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-35-1438779193" data-wpt-name="event-type[]" value="89" data-parent="52" data-value="DANCE THE NIGHT AWAY" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-35-1438779193">DANCE THE NIGHT AWAY</label>
</li>

<li class="tax-exhibitions tax-event-type-84">
<input type="checkbox" id="cred_form_6568_1-checkbox-36-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-36-1438779193" data-wpt-name="event-type[]" value="84" data-parent="52" data-value="EXHIBITIONS" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-36-1438779193">EXHIBITIONS</label>
</li>

<li class="tax-mix-mingle tax-event-type-90">
<input type="checkbox" id="cred_form_6568_1-checkbox-37-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-37-1438779193" data-wpt-name="event-type[]" value="90" data-parent="52" data-value="MIX &amp; MINGLE" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-37-1438779193">MIX &amp; MINGLE</label>
</li>

<li class="tax-product-launches tax-event-type-85">
<input type="checkbox" id="cred_form_6568_1-checkbox-38-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-38-1438779193" data-wpt-name="event-type[]" value="85" data-parent="52" data-value="PRODUCT LAUNCHES" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-38-1438779193">PRODUCT LAUNCHES</label>
</li>

<li class="tax-wow-factor tax-event-type-88">
<input type="checkbox" id="cred_form_6568_1-checkbox-39-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-39-1438779193" data-wpt-name="event-type[]" value="88" data-parent="52" data-value="WOW FACTOR" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-39-1438779193">WOW FACTOR</label>
</li></ul></li>

<li class="tax-private-parties tax-event-type-83">
<input type="checkbox" id="cred_form_6568_1-checkbox-40-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-40-1438779193" data-wpt-name="event-type[]" value="83" data-parent="-1" data-value="PRIVATE PARTIES" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-40-1438779193">PRIVATE PARTIES</label>
</li>

<li class="tax-children-of-83"><ul class="wpt-form-set-children wpt-form-set-children-level-1" data-level="1"><li class="tax-chill-out tax-event-type-101">
<input type="checkbox" id="cred_form_6568_1-checkbox-41-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-41-1438779193" data-wpt-name="event-type[]" value="101" data-parent="83" data-value="CHILL OUT" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-41-1438779193">CHILL OUT</label>
</li>

<li class="tax-party-band tax-event-type-99">
<input type="checkbox" id="cred_form_6568_1-checkbox-42-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-42-1438779193" data-wpt-name="event-type[]" value="99" data-parent="83" data-value="PARTY BAND" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-42-1438779193">PARTY BAND</label>
</li>

<li class="tax-tribute-theme tax-event-type-98">
<input type="checkbox" id="cred_form_6568_1-checkbox-43-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-43-1438779193" data-wpt-name="event-type[]" value="98" data-parent="83" data-value="TRIBUTE THEME" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-43-1438779193">TRIBUTE THEME</label>
</li>

<li class="tax-walk-around-acts tax-event-type-102">
<input type="checkbox" id="cred_form_6568_1-checkbox-44-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-44-1438779193" data-wpt-name="event-type[]" value="102" data-parent="83" data-value="WALK AROUND ACTS" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-44-1438779193">WALK AROUND ACTS</label>
</li>

<li class="tax-wow-factor tax-event-type-100">
<input type="checkbox" id="cred_form_6568_1-checkbox-45-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-45-1438779193" data-wpt-name="event-type[]" value="100" data-parent="83" data-value="WOW FACTOR" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-45-1438779193">WOW FACTOR</label>
</li></ul></li>

<li class="tax-wedding tax-event-type-53">
<input type="checkbox" id="cred_form_6568_1-checkbox-46-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-46-1438779193" data-wpt-name="event-type[]" value="53" data-parent="-1" data-value="WEDDING" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-46-1438779193">WEDDING</label>
</li>

<li class="tax-children-of-53"><ul class="wpt-form-set-children wpt-form-set-children-level-1" data-level="1"><li class="tax-ceremony tax-event-type-93">
<input type="checkbox" id="cred_form_6568_1-checkbox-47-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-47-1438779193" data-wpt-name="event-type[]" value="93" data-parent="53" data-value="CEREMONY" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-47-1438779193">CEREMONY</label>
</li>

<li class="tax-drinks-reception tax-event-type-94">
<input type="checkbox" id="cred_form_6568_1-checkbox-48-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-48-1438779193" data-wpt-name="event-type[]" value="94" data-parent="53" data-value="DRINKS RECEPTION" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-48-1438779193">DRINKS RECEPTION</label>
</li>

<li class="tax-evening-party tax-event-type-95">
<input type="checkbox" id="cred_form_6568_1-checkbox-49-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-49-1438779193" data-wpt-name="event-type[]" value="95" data-parent="53" data-value="EVENING PARTY" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-49-1438779193">EVENING PARTY</label>
</li>

<li class="tax-mix-mingle tax-event-type-97">
<input type="checkbox" id="cred_form_6568_1-checkbox-50-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-50-1438779193" data-wpt-name="event-type[]" value="97" data-parent="53" data-value="MIX &amp; MINGLE" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-50-1438779193">MIX &amp; MINGLE</label>
</li>

<li class="tax-sangeet tax-event-type-96">
<input type="checkbox" id="cred_form_6568_1-checkbox-51-1438779193" name="event-type[]" data-wpt-type="checkbox" data-wpt-id="cred_form_6568_1_cred_form_6568_1-checkbox-51-1438779193" data-wpt-name="event-type[]" value="96" data-parent="53" data-value="SANGEET" class="wpt-form-checkbox form-checkbox checkbox"><label class="wpt-form-label wpt-form-checkbox-label" for="cred_form_6568_1-checkbox-51-1438779193">SANGEET</label>
</li></ul></li></ul>

我需要在选中任何子复选框时选中父复选框。

即使 wordpress 添加了更多的事件类型，有什么方法可以让它工作吗？

提前致谢!

Answer 1

看起来每个输入都通过“data-parent”属性链接到父级，如果没有数据父级，则该属性为 -1。如果情况总是如此，下面 fiddle 处的代码应该可以工作。

var events = $('input[name="event-type[]"]');

$(events).each(function() {
    if($(this).attr('data-parent') != -1) {
        $(this).on('click',function() {
            var subBoxChecked = $(this).prop('checked');
            var subBoxes = $('input[data-parent="' + $(this).attr('data-parent') + '"]');

            $(subBoxes).each(function(index,element) {
                subBoxChecked = subBoxChecked || $(element).prop('checked');
            });

            $('input[value="' + $(this).attr('data-parent') + '"]').prop('checked',subBoxChecked);
        });
    }
});

http://jsfiddle.net/apandit/eqsg8kte/