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

Question

Я пытаюсь написать код jQuery для подтверждения, если установлен определенный переключатель. Если этот переключатель установлен, появится 4 флажка, и по крайней мере один из них должен быть проверен. Если нет, браузер показывает предупреждение, в другом случае отправляется форма.

Проблема в том, что даже если я выберу флажок, я получу предупреждение обозревателя, что я не установил флажок, и форма не будет отправлена. Thx заранее.

HTML:

<form method='POST' action='#'> 
     <input type='radio' id='D_odg' name='c' value=''> 

     <div id='D_div'> 

      <input type='checkbox' value='1' name='c3' id='inputD1'><label>Label1</label> 
      <input type='checkbox' value='2' name='c3' id='inputD2'><label>Label2</label> 
      <input type='checkbox' value='3' name='c3' id='inputD3'><label>Label3</label> 
      <input type='checkbox' value='4' name='c3' id='inputD4'><label>Label4</label> 

     </div> 

     <input type='submit' value='Send' id='button'> 

</form> 

JQuery:

$('#button').click(function() { 
    var checkedboxes = $('.D_div :checkbox:checked').length; 
    if ($('#D_odg').prop('checked') && checkedboxes===0{ 
      alert('At least 1 checkbox must be selected'); 
      return false;    
    }else{ 
      alert('Form submited!'); 
    }   
}); 

Answer 1

несколько проблем с вашим кодом.

1) У вас есть неправильный селектор для установки родительского div флажков. D_div - это идентификатор div, а не класс. Таким образом, вы должны использовать селектор ID # вместо класса селектора .:

var checkedboxes = $('#D_div :checkbox:checked').length; 
        //^^ ID selector here 

2) У вас есть ошибка синтаксиса. Вы не использовали фигурные скобки закрытия для если условия

if ($('#D_odg').prop('checked') && checkedboxes===0) 
               // ^^ missing brace 

Working Demo

Answer 2

Попробуйте это: вы использовали класс селектор вместо селектора для D_div. Кроме того, вы можете изменить $('#D_odg').prop('checked') к $('#D_odg').is(':checked'), который выглядит более удобным для чтения, см ниже код

$('#button').click(function() { 

     var checkedboxes = $('#D_div :checkbox:checked').length; 

     if ($('#D_odg').is(':checked') && checkedboxes===0){ 
      alert('At least 1 checkbox must be selected'); 
      return false; 

     }else{ 

      alert('Form submited!'); 

     }   

    }); 

Answer 3

Вы пропустили закрывающую скобку после === 0. Также: checkbox: checked возвращался 0. Это работает:

$('#button').click(function() { 
    var checkedboxes = $('[name="c3"]:checked').length; 
    if ($('#D_odg').prop('checked') && checkedboxes===0){ 
     alert('At least 1 checkbox must be selected'); 
     return false; 
    }else{ 
     alert('Form submited!'); 
    }   
});