使用 jQuery 限制复选框（一次一个类别和一个子类别）

Question

我的 WordPress 站点中有一个类别列表，其中包含强大的插件，其代码如下所示：

<div class="frm_opt_container" aria-labelledby="field_kategori_label" role="group">
    <div class="frm_catlevel_1">
        <div class="frm_checkbox" id="frm_checkbox_11-97876986">
            <label for="field_11-97876986"><input type="checkbox" name="item_meta[11][]" id="field_11-97876986" value="97876986"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />BI Prestasi</label>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97876987">
                    <label for="field_11-97876987"><input type="checkbox" name="item_meta[11][]" id="field_11-97876987" value="97876987"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #1</label>
                </div>
            </div>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97876988"><label for="field_11-97876988"><input type="checkbox" name="item_meta[11][]" id="field_11-97876988" value="97876988"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #2</label>
                </div>
            </div>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97876989"><label for="field_11-97876989"><input type="checkbox" name="item_meta[11][]" id="field_11-97876989" value="97876989"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #3</label>
                </div>
            </div>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97876990"><label for="field_11-97876990"><input type="checkbox" name="item_meta[11][]" id="field_11-97876990" value="97876990"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #4</label>
                </div>
            </div>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97877081"><label for="field_11-97877081"><input type="checkbox" name="item_meta[11][]" id="field_11-97877081" value="97877081"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #5</label>
                </div>
            </div>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97877082"><label for="field_11-97877082"><input type="checkbox" name="item_meta[11][]" id="field_11-97877082" value="97877082"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #6</label>
                </div>
            </div>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97877083"><label for="field_11-97877083"><input type="checkbox" name="item_meta[11][]" id="field_11-97877083" value="97877083"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #7</label>
                </div>
            </div>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97877084"><label for="field_11-97877084"><input type="checkbox" name="item_meta[11][]" id="field_11-97877084" value="97877084"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #8</label>
                </div>
            </div>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97877085"><label for="field_11-97877085"><input type="checkbox" name="item_meta[11][]" id="field_11-97877085" value="97877085"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #9</label>
                </div>
            </div>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97877086"><label for="field_11-97877086"><input type="checkbox" name="item_meta[11][]" id="field_11-97877086" value="97877086"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #10</label>
                </div>
            </div>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97877087"><label for="field_11-97877087"><input type="checkbox" name="item_meta[11][]" id="field_11-97877087" value="97877087"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #11</label>
                </div>
            </div>
            <div class="frm_catlevel_2">
                <div class="frm_checkbox" id="frm_checkbox_11-97877090"><label for="field_11-97877090"><input type="checkbox" name="item_meta[11][]" id="field_11-97877090" value="97877090"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #12</label>
                </div>
            </div>
        </div>
    </div>
    <div class="frm_catlevel_1">
        <div class="frm_checkbox" id="frm_checkbox_11-97877047"><label for="field_11-97877047"><input type="checkbox" name="item_meta[11][]" id="field_11-97877047" value="97877047"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />BI Digital</label>
        </div>
    </div>
    <div class="frm_catlevel_1">
        <div class="frm_checkbox" id="frm_checkbox_11-97877048"><label for="field_11-97877048"><input type="checkbox" name="item_meta[11][]" id="field_11-97877048" value="97877048"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />BI Inovasi</label>
        </div>
    </div>
    <div class="frm_catlevel_1">
        <div class="frm_checkbox" id="frm_checkbox_11-97877052"><label for="field_11-97877052"><input type="checkbox" name="item_meta[11][]" id="field_11-97877052" value="97877052"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />BI Religi</label>
        </div>
    </div>
</div>

现在我希望用户可以一次 select 一个主要类别及其任何一个子类别（如果存在子类别）。

到目前为止我尝试了什么：

(function($)
{
    $(':checkbox').on('click', function()
    {
        // uncheck every checkbox
        $(':checkbox').prop('checked', false);

        // set initial variables
        var cekboks = $(this), $cariterdekat, jikapunyainduk;

        // loop
        do {
            // tick the selected cekboks
            cekboks.prop('checked', true);

            // get its closest UL
            $cariterdekat= cekboks.closest('[class^="frm_catlevel_1"]');

            // check if selected category has a parent
            jikapunyainduk = $cariterdekat.prev().is('[class^="frm_catlevel_2');

            // set the new cekboks to the one that belong to the parent
            cekboks = $('> input', $cariterdekat.prev());
        } while ( jikapunyainduk);
    });
})(jQuery);

但是当子类别被 selected 时，它没有检查父类别，正如可以看到的：https://bichange.wpcomstaging.com/form/

Answer 1

有趣，你可能在我测试页面时更改了页面，因为我看到你将复选框更改为选择框... 无论如何，据我所知，你希望只有一个复选框被选中或者如果它的子类别应该是两个 - 一个子类别和一个父类别。

如果是这样，这是解决方案：

// remove your current listeners
$(':checkbox').off('click')
(function($)
{
    $(':checkbox').on('click', function()
    {
        // uncheck every checkbox
        $(':checkbox').prop('checked', false);

        // set initial variables
        var cekboks = $(this), hasParent;


        // tick the selected cekboks
        cekboks.prop('checked', true);
        console.log("cekboks", cekboks)

        // make sure has parents
        hasParent = cekboks.parents('.frm_catlevel_1')
        if(hasParent.length>0){
            // tick the parent category checkbox

            hasParent.find(":checkbox").first().prop("checked", true);
        }
    });
})(jQuery)

Answer 2

您可以找到切换框的包装 div 并检查它位于哪个级别，然后根据需要切换其父级。

(function($) {
  $(':checkbox').on('click', function() {
    // set initial variables
    var cekboks = $(this);
    let isChecked = cekboks.is(':checked');

    // uncheck every checkbox
    $(':checkbox').prop('checked', false);

    // Find wrapping div that contains the class frm_catlevel
    $wrapper = cekboks.closest('div').parent(); // Or div[class^="frm_catlevel"]

    // Check if clicked item is 2nd level
    if ($wrapper.is('.frm_catlevel_2')) {
      $wrapper.closest('.frm_catlevel_1')
        // The first checkbox is the parent category
        .find(':checkbox').first()
        .prop('checked', true);
    }
    // If the element was already checked allow unchecking it
    if (isChecked)
      cekboks.prop('checked', true);
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="frm_opt_container" aria-labelledby="field_kategori_label" role="group">
  <div class="frm_catlevel_1">
    <div class="frm_checkbox" id="frm_checkbox_11-97876986">
      <label for="field_11-97876986"><input type="checkbox" name="item_meta[11][]" id="field_11-97876986" value="97876986"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />BI Prestasi</label>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97876987">
          <label for="field_11-97876987"><input type="checkbox" name="item_meta[11][]" id="field_11-97876987" value="97876987"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #1</label>
        </div>
      </div>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97876988"><label for="field_11-97876988"><input type="checkbox" name="item_meta[11][]" id="field_11-97876988" value="97876988"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #2</label>
        </div>
      </div>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97876989"><label for="field_11-97876989"><input type="checkbox" name="item_meta[11][]" id="field_11-97876989" value="97876989"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #3</label>
        </div>
      </div>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97876990"><label for="field_11-97876990"><input type="checkbox" name="item_meta[11][]" id="field_11-97876990" value="97876990"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #4</label>
        </div>
      </div>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97877081"><label for="field_11-97877081"><input type="checkbox" name="item_meta[11][]" id="field_11-97877081" value="97877081"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #5</label>
        </div>
      </div>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97877082"><label for="field_11-97877082"><input type="checkbox" name="item_meta[11][]" id="field_11-97877082" value="97877082"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #6</label>
        </div>
      </div>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97877083"><label for="field_11-97877083"><input type="checkbox" name="item_meta[11][]" id="field_11-97877083" value="97877083"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #7</label>
        </div>
      </div>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97877084"><label for="field_11-97877084"><input type="checkbox" name="item_meta[11][]" id="field_11-97877084" value="97877084"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #8</label>
        </div>
      </div>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97877085"><label for="field_11-97877085"><input type="checkbox" name="item_meta[11][]" id="field_11-97877085" value="97877085"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #9</label>
        </div>
      </div>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97877086"><label for="field_11-97877086"><input type="checkbox" name="item_meta[11][]" id="field_11-97877086" value="97877086"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #10</label>
        </div>
      </div>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97877087"><label for="field_11-97877087"><input type="checkbox" name="item_meta[11][]" id="field_11-97877087" value="97877087"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #11</label>
        </div>
      </div>
      <div class="frm_catlevel_2">
        <div class="frm_checkbox" id="frm_checkbox_11-97877090"><label for="field_11-97877090"><input type="checkbox" name="item_meta[11][]" id="field_11-97877090" value="97877090"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />PS #12</label>
        </div>
      </div>
    </div>
  </div>
  <div class="frm_catlevel_1">
    <div class="frm_checkbox" id="frm_checkbox_11-97877047"><label for="field_11-97877047"><input type="checkbox" name="item_meta[11][]" id="field_11-97877047" value="97877047"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />BI Digital</label>
    </div>
  </div>
  <div class="frm_catlevel_1">
    <div class="frm_checkbox" id="frm_checkbox_11-97877048"><label for="field_11-97877048"><input type="checkbox" name="item_meta[11][]" id="field_11-97877048" value="97877048"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />BI Inovasi</label>
    </div>
  </div>
  <div class="frm_catlevel_1">
    <div class="frm_checkbox" id="frm_checkbox_11-97877052"><label for="field_11-97877052"><input type="checkbox" name="item_meta[11][]" id="field_11-97877052" value="97877052"  data-frmlimit="1"  data-invmsg="Kategori is invalid"   />BI Religi</label>
    </div>
  </div>
</div>

使用 jQuery 限制复选框（一次一个类别和一个子类别）

Restrict checkbox (one category and one subcategory at a time) with jQuery

wordpress

jquery

formidable