0

在我的上传表单中，我有几个选择框。这些被安排在名为#age-groups、#subjects 和#topics 的div 中。

我希望能够使用 jquery 来确保用户从 3 个单独的 div 中的每一个中单击至少一个复选框。

请有人帮我弄清楚如何做到这一点。

对于单击每个 div 中的至少一个复选框时，我希望函数输出：

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

如果可能，该函数可以在选择最终所需的选择框后立即输出上述代码。

4

4 回答 4

0

您需要检查复选框/选择框的父母以确定。

看看这个

基本上，

HTML

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

JavaScript/jQuery

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

会为你工作

于 2012-04-04T11:43:20.770 回答
0

您需要使用三个选择器来识别三个 DIV 中的任何选中复选框，然后检查length生成的 jQuery 对象的属性以确保它们大于零。

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

我只包含了#age-groupsdiv 的选择器，但您应该能够修改它以选择其他两个。

于 2012-04-04T11:48:50.537 回答
0 
$(":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');
    }
});
于 2012-04-04T11:49:38.710 回答
0

——误读了问题。如果您想检查是否在所有相关 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 对它们进行分组，这可以简化。

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

希望这可以帮助！

于 2012-04-04T11:49:51.007 回答