在表單展開時至少檢查一個表單中的複選框

Question

我有一個表單，它在檢查時展開。當表單展開時，有多個複選框 - 我需要確保此時至少選中一個複選框。我沒有選擇任何複選框時有以下html/js代碼，但是當我選中主複選框時，錯誤消失。當在展開的表單中選中任何複選框時，錯誤應該消失。

$(document).ready(function() { 
 
    $('#checkBtn').click(function() { 
 
     checked = $("input[type=checkbox]:checked").length; 
 

 
     if(!checked) { 
 
     alert("You must check at least one checkbox."); 
 
     return false; 
 
     } 
 

 
    }); 
 
    });

.inputs { 
 
    display: none; 
 
} 
 

 
.foo:checked + .inputs { 
 
    display: initial; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<form action="foo"> 
 
    <input type="checkbox" class="foo"> Pre-designed contour: 
 
    <div class="inputs"> 
 

 
    <input type="checkbox" name="contour" value="fiveSeven" id="fiveSeven"> 5x7 
 
    <input type="checkbox" required id="sixEight"> 6x8 
 
    <input type="checkbox" required id="sixNine"> 6x9 
 
    </div> 
 
</form> 
 

 
<input type="button" value="Test Required" id="checkBtn">

Answer 1

你是c-黑金使用線中的代碼的任何選中的複選框：相反

checked = $("input[type=checkbox]:checked").length; 

，你應該在檢查DIV複選框當選擇主複選框時顯示。

解決方案：

檢查提交按鈕單擊時主複選框的狀態。如果已選中，則檢查顯示的div中所選複選框的數量。

1. 提供的id屬性值（例如mainCheckbox）到主要複選框，同一類的值（例如childCheckbox）在DIV所有複選框顯示的。

2. 按鈕點擊事件，檢查主複選框的狀態。

   if ($('#mainCheckbox')[0].checked) { 
       //check for selected checkboxes in div 
   } 
   

3. 如果檢查，檢查所選複選框

   if ($('#mainCheckbox')[0].checked) { 
   
       if(!$('.childCheckbox:checked').length) { 
   
        alert("You must check at least one checkbox."); 
   
        return false; 
       } 
   } 
   

JSfiddle for solution

Answer 2

你jQuery是檢查任何input[type=checkbox]:checked，其中包括主要#checkBtn複選框。給你的表單輸入一個類並檢查它們，或者在jQuery腳本中改變你的選擇器，只在你的表單中查找輸入。

Answer 3

你檢查的類型複選框的許多投入如何檢查：

$("input[type=checkbox]:checked").length

這將始終是至少1，當你的主複選框被選中。

只需給你的其他複選框一類，只選擇它們或檢查長度大於1

順便說一句，你不應該把INT到if子句，走的時候，寫的表達你的意思是。

Answer 4

你要添加更多的條件和可選的ID爲你的主複選框，我想這HTML標記：

<input type="checkbox" id="mainbox" class="foo"> 

而且JS：

$(document).ready(function() { 
     var checkedValue; 
     $('#checkBtn').click(function() { 
      checked = $("input[type=checkbox]:checked").length; 

      if (document.querySelector('#mainbox').checked == true) { 
       if (checked == 1) { 
        alert("You must check at least one option."); 
        return false; 
       } 
      } else if (!checked) { 
       alert("You must check at least one checkbox."); 
       return false; 
      } 

     }); 
    }); 

我做了一個工作的jsfiddle例如你：

https://jsfiddle.net/oggdg7dh/