Необычное флажок поведение

Question

HTML:

<input type="checkbox" id="1" val="1" onclick="select_box(id);" name="main_vals[]">Box 1 
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1 
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1 
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1 
<input type="checkbox" id="2" val="2" onclick="selec_boxt(id);" name="main_vals[]">Box 2 
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2 
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2 
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2 
<input type="checkbox" id="3" val="3" onclick="select_box(id);" name="main_vals[]">Box 3 
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3 
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3 
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3 

Javascript:

select_box = function(id) { 
    if($('#main_checkbox_'+id).is(:checked)) { 
     $('.sub_checkbox_'+id).each(function() { 
      this.checked = true; 
     }); 
    } else { 
     $('.sub_checkbox_'+id).each(function() { 
      this.checked = false; 
     }); 
    } 
} 

Описание:

Как вы можете видеть, у меня есть несколько флажков. Моя цель здесь - проверить, установлен ли флажок с идентификатором main_checkbox_+id, а также все соответствующие флажки с идентификатором sub_checkbox_+id. Точно так же, если основной флажок снят, соответствующие флажки подпапки не должны быть отмечены. Хотя это, похоже, работает для большинства основных и вспомогательных флажков, есть несколько, которые не работают должным образом. С этими немногими, проверка, чтобы проверить, проверен ли main_checkbox, всегда дает false. Я не уверен, почему я испытываю такое поведение. У меня есть еще много флажков в html в том же формате. Иды динамически генерируются для всех флажков.

Answer 1

попробовать с этим:

HTML:

<input type="checkbox" id="1" class="main_checkbox_1" val="1" onclick="select_box(id);" name="main_vals[]">Box 1 
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1 
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1 
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1 
<input type="checkbox" id="2" val="2" class="main_checkbox_2" onclick="select_box(id);" name="main_vals[]">Box 2 
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2 
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2 
<input type="checkbox" class="sub_checkbox_2" val="2.1" name="sub_vals[]">Sub box 2 
<input type="checkbox" id="3" val="3" class="main_checkbox_3" onclick="select_box(id);" name="main_vals[]">Box 3 
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3 
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3 
<input type="checkbox" class="sub_checkbox_3" val="3.1" name="sub_vals[]">Sub box 3 

JS:

select_box = function(id) { 
    console.log(id); 
     if($('.main_checkbox_'+id).is(":checked")) { 
       $('.sub_checkbox_'+id).each(function() { 
        this.checked = true; 
       }); 
     } else { 
       $('.sub_checkbox_'+id).each(function() { 
         this.checked = false; 
       }); 
     } 
} 

с id вы пройдете весь идентификатор функции, а не только номер 1 , 2,3..так, я изменил идентификатор и добавил класс к основному флажку, исправляя JS по con последовательность.

вы можете увидеть рабочую скрипку here.

Answer 2

Получить атрибут val с помощью this.getAttribute('val')

HTML

<input type="checkbox" id="main_checkbox_1" val="1" onclick="select_box(this.getAttribute('val'));" name="main_vals[]">Box 1 
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1 
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1 
<input type="checkbox" class="sub_checkbox_1" val="1.1" name="sub_vals[]">Sub box 1 
<input type="checkbox" id="main_checkbox_2" val="2" onclick="select_box(this.getAttribute('val'));" name="main_vals[]"> 

JQuery

select_box = function(id) { 
     if($('#main_checkbox_'+id).is(':checked')) { 
       $('.sub_checkbox_'+id).prop('checked',true); 
     } else { 
       $('.sub_checkbox_'+id).prop('checked',false); 
     } 
} 

DEMO

Но лучший способ сделать это с помощью делегирования и имеющих контейнеры как этот

HTML

<div class="container"> 
    <input type="checkbox" class="main_checkbox" val="1" name="main_vals[]">Box 1 
    <input type="checkbox" class="sub_checkbox" val="1.1" name="sub_vals[]">Sub box 1 
    <input type="checkbox" class="sub_checkbox" val="1.1" name="sub_vals[]">Sub box 1 
    <input type="checkbox" class="sub_checkbox" val="1.1" name="sub_vals[]">Sub box 1 
</div> 
<div class="container"> 
    <input type="checkbox" class="main_checkbox" val="2" name="main_vals[]">Box 2 
    <input type="checkbox" class="sub_checkbox" val="2.1" name="sub_vals[]">Sub box 2 
    <input type="checkbox" class="sub_checkbox" val="2.1" name="sub_vals[]">Sub box 2 
    <input type="checkbox" class="sub_checkbox" val="2.1" name="sub_vals[]">Sub box 2 
</div> 
<div class="container"> 
    <input type="checkbox" class="main_checkbox" val="3" name="main_vals[]">Box 3 
    <input type="checkbox" class="sub_checkbox" val="3.1" name="sub_vals[]">Sub box 3 
    <input type="checkbox" class="sub_checkbox" val="3.1" name="sub_vals[]">Sub box 3 
    <input type="checkbox" class="sub_checkbox" val="3.1" name="sub_vals[]">Sub box 3 
</div> 

JQuery

$('.main_checkbox').on('change',function(){ 
    $(this).siblings('.sub_checkbox').prop('checked',this.checked); 
}); 

DEMO