如何使用 jquery 驗證是否至少選中了#age-groups、#subjects 和#topics 中的一個復選框

Question

在我的上傳表單中，我有幾個 select 框。 這些被安排在名為#age-groups、#subjects 和#topics 的 div 中。

我希望能夠使用 jquery 來確保用戶從 3 個單獨的 div 中的每一個中至少單擊一個復選框。

請有人幫我弄清楚如何做到這一點。

當每個 div 中至少有一個復選框被點擊時，我想要 function 到 output：

   if (at least 1 checkbox is ticked in each of the 3 divs)
   {
     $('#two')
         .append('<div class="done rotatetwo wiggler"></div>')
         .addClass('grey')
   }

如果可能的話，這個 function output 上面的代碼只要選擇最后需要的 select 框就可以了。

Answer 1

您需要檢查復選框/選擇框的父級以確定。

看看這個

基本上，

HTML

<fieldset id="age-groups">
  <input type="checkbox" name="chk[]" value="Apples" />
  <input type="checkbox" name="chk[]" value="Bananas" />
</fieldset>

JavaScript/查詢

 var atLeastOneIsChecked_ageGroups = $('#age-groups :checkbox:checked').length > 0;

會為你工作

Answer 2

您需要使用三個選擇器來識別三個 DIV 中所有選中的復選框，然后檢查生成的 jQuery 對象的length屬性以確保它們大於零。

if($('#age-groups input:checkbox:checked').length && ... ) {
    // do your stuff here
}

我只包含了#age-groups div 的選擇器，但您應該能夠將其他兩個的選擇器修改為 select。

Answer 3

$(":checkbox").click(function(){
    if (($("#age-groups input:checked").length>0) && ($("#subjects input:checked").length>0) && ($("#topics input:checked").length>0){
        $('#two').append('<div class="done rotatetwo wiggler"></div>').addClass('grey');
    }
});

Answer 4

- 誤讀了問題。 如果您想檢查是否在所有相關 div 中至少選擇了一個框，這將對您有所幫助。

嘗試這樣的事情：

if($("#age-groups input[name^='foo']:checked:enabled, #subjects input[name^='foo']:checked:enabled, #topics input[name^='foo']:checked:enabled").length > 0)
// at least one selected
else
// none selected

當然，如果不使用父div 對所有復選框進行分組，而是將class 添加到所有復選框，則可以簡化這一點。

if( $("input[name^='foo'].test:checked:enabled").length > 0)
// something selected

希望這可以幫助！