Выберите 'child' на основе идентификатора 'parent' с помощью jquery

Question

У меня есть флажки, каждый с уникальным идентификатором. Когда отмечен «родительский», флажки «дочерний» также должны быть отмечены. Проблема в том, что «родительские» флажки связаны с дочерними элементами на основе идентификатора, а не иерархии элементов, поскольку все они находятся на одном уровне:

<div id="checkinline">
  <input type="checkbox" id="CC__100"></input> <- 'parent' 
  <input type="checkbox" id="CC__10010"></input> 
  <input type="checkbox" id="CC__10020"></input> 
  <input type="checkbox" id="CC__10030"></input> 
  <input type="checkbox" id="CC__10040"></input> 
</div>

Когда установлен флажок CC__100, мне нужны все флажки с идентификаторы с префиксом CC__100 также должны быть проверены.

Моя попытка на данный момент:

 $("div#" + id + " :input").each(function () {
        var input = $(this);
        var element_id = input.prop('id');
        var element_type = input.prop('type');
        if (element_type === 'checkbox') {
            if (element_id == i miss this) {
                $(this).prop('checked', true)
            }
        }

    })

Answer 1

Вы можете попробовать это, используя атрибут начинается с селектора [id ^ = "value"] :

$('.chk :checkbox').on('change', (e) => {
  $(e.target).nextAll('[id^="'+ e.target.id +'"]').prop('checked', e.target.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chk">
  <input type="checkbox" id="CC__100" />
  <input type="checkbox" id="CC__10010" />
  <input type="checkbox" id="CC__10020" />
  <input type="checkbox" id="CC__10030" />
  <input type="checkbox" id="CC__10040" /><br/>
  <input type="checkbox" id="CC__200" />
  <input type="checkbox" id="CC__20010" />
  <input type="checkbox" id="CC__20020" />
  <input type="checkbox" id="CC__20030" />
  <input type="checkbox" id="CC__20040" />
</div>

Answer 2

Вы думаете, что это сложно, вы должны проверить, "родитель" "меняется". Когда проверяется, проверяется ли состояние, проверьте все элементы с идентификатором, который начинается с «CC__100».

Это часть "[id ^ = 'CC__100']" ( селекторы ).

$("#CC__100").change(function () {
  if (this.checked) {
    $("[id^='CC__100']").prop("checked", true);
  }
});

Codepen

Answer 3

Вы можете использовать начинается с селектора атрибута ([attr^=value]), чтобы найти элементы с идентификатором, который начинается с идентификатора только что установленного флажка.

$('input[type=checkbox]').click(e => {
  const { target } = e;
  
  // Children have an ID that start with the id of the select checbox, but don't have the exact id
  const children = $( `input[type=checkbox][id^=${target.id}][id!=${target.id}]` );
  
  // Set children to the value of the parent:
  children.prop( 'checked', $(target).prop('checked') );
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="checkinline">
  <input type="checkbox" id="CC__100"><label for="CC__100">Parent 100</label><br>
  <input type="checkbox" id="CC__10010"><label for="CC__10010">Child 10010</label><br>
  <input type="checkbox" id="CC__10020"><label for="CC__10020">Child 10020</label><br>
  <input type="checkbox" id="CC__10030"><label for="CC__10030">Child 10030</label><br>
  <input type="checkbox" id="CC__10040"><label for="CC__10040">Child 10040</label><br>
  <br>
  <input type="checkbox" id="CC__200"><label for="CC__200">Parent 200</label><br>
  <input type="checkbox" id="CC__20010"><label for="CC__20010">Child 20010</label><br>
  <input type="checkbox" id="CC__20020"><label for="CC__20020">Child 20020</label><br>
  <input type="checkbox" id="CC__20030"><label for="CC__20030">Child 20030</label><br>
  <input type="checkbox" id="CC__20040"><label for="CC__20040">Child 20040</label><br>
</div>