如果没有复选框选中 JavaScript，则在表单提交时显示警告

Question

我已经在一个表单上放置了一个 onsubmit 函数，它会检查某些复选框是否被选中。

我遇到的问题是我只需要检查每列中的一个复选框，总共有 3 列，每列中大约有 6 个不同的复选框 - 列中的每个复选框共享相同的 ID（这就是让我很难）。

下面的脚本有效，但它需要检查每列中的所有框，我如何修改它以仅在每列中的一个复选框被选中时才提交。

<script type="text/javascript">
window.onload = function() {
    var form = document.getElementById('uwpqsffrom_731');
    form.onsubmit = function() {
        var no1 = 0, no2 = 0, no3 = 0;
    var list;
    list = document.getElementsByName('taxo[0][term][]');
    for(i=0; i<list.length; i++)
    {
       if (list[i].checked)
       {
           no1++;
       }
    }
    list = document.getElementsByName('taxo[1][term][]');
    for(i=0; i<list.length; i++)
    {
       if (list[i].checked)
       {
           no2++;
       }
    }
    list = document.getElementsByName('taxo[2][call]');
    for(i=0; i<list.length; i++)
    {
       if (list[i].checked)
       {
           no3++;
       }
    }
    list = document.getElementsByName('taxo[2][term][]');
    for(i=0; i<list.length; i++)
    {
       if (list[i].checked)
       {
           no3++;
       }
    }
    if ( no1 == 0 || no2 == 0 || no3 == 0 )
    {
        alert("Please select at least one option from each section");
        return false;
    }
    }
}
</script>

HTML：

您可以看到有多个具有相同 ID 的复选框 - 我只需要检查其中的 1 个即可提交表单。

<form id="uwpqsffrom_731" method="get" action="http://test.com/">

<div class="uform_title">Find Your Perfect Venue</div><input type="hidden" name="unonce" value="a92b348757"><input type="hidden" name="uformid" value="731"><input type="hidden" name="s" value="uwpsfsearchtrg">

<div class="uwpqsf_class  tax-check-0 togglecheck">
<span class="taxolabel-0">Guests</span>
<input type="hidden" name="taxo[0][name]" value="number-of-guests">
<input type="hidden" name="taxo[0][opt]" value="1">
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="150-180">150-180</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="180-200">180-200</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="20-50">20-50</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="200-350">200-350</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="200-380">200-380</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="350-500">350-500</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="50-65">50-65</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="500-1000">500-1000</label>
<label><input type="checkbox" id="tchkb-0" name="taxo[0][term][]" value="65-150">65-150</label>
</div>

<div class="uwpqsf_class  tax-check-1 togglecheck">
<span class="taxolabel-1">Event Type</span>
<input type="hidden" name="taxo[1][name]" value="event-type">
<input type="hidden" name="taxo[1][opt]" value="1">
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="awards-dinner">Awards Dinner</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="awards-dinner-dance">Awards Dinner Dance</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="barbat-mitzvah">Bar/Bat Mitzvah</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="cocktail-party">Cocktail Party</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="dinner">Dinner</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="dinner-dance">Dinner Dance</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="networking-event">Networking Event</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="party">Party</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="vip-experience">VIP Experience</label>
</div>

<div class="uwpqsf_class  tax-check-2 togglecheck">
<span class="taxolabel-2">Venue Preference</span>
<input type="hidden" name="taxo[2][name]" value="venue-locations">
<input type="hidden" name="taxo[2][opt]" value="">
<label><input type="checkbox" id="tchkb-2" name="taxo[2][call]" class="chktaxoall">All Venues</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="london-dungeon">London</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="madame-tussauds">New York</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="sea-life">Russia</label>
<label><input type="checkbox" id="tchkb-2" name="taxo[2][term][]" value="stardome-4d">Spain</label>
</div>

<div class="uwpqsf_class  uwpqsf_submit">
<input type="submit" id="uwpqsf_id_btn" value="Search" alt="[Submit]" class="usfbtn ">
</div>
</form>

Answer 1

对您原来的 javascript 进行了一些更改，但您应该能够轻松地将我的代码复制粘贴到您的代码上。

function test() {
var no1 = 0, no2 = 0, no3 = 0;
var list;
list = document.getElementsByName('taxo[0][term][]');
for(i=0; i<list.length; i++)
{
   if (list[i].checked)
   {
       no1++;
   }
}
list = document.getElementsByName('taxo[1][term][]');
for(i=0; i<list.length; i++)
{
   if (list[i].checked)
   {
       no2++;
   }
}
list = document.getElementsByName('taxo[2][call]');
for(i=0; i<list.length; i++)
{
   if (list[i].checked)
   {
       no3++;
   }
}
list = document.getElementsByName('taxo[2][term][]');
for(i=0; i<list.length; i++)
{
   if (list[i].checked)
   {
       no3++;
   }
}

if ( no1 == 0 || no2 == 0 || no3 == 0 )
{
    alert("Please select at least one option from each section");
    return false;
}

}

对不起，这有点草率，没有jQuery，我真的不能很好地处理javascript，并且由于您的标记而存在一些限制（根本没有改变它，正如您所说的那样它都是由插入。

不管怎样，这里也有一个jsfiddle

（注意：必须为最后一列输入两次for，因为我们的名称不同......）

（注2：如果你也可以使用jQuery，我可以很好地清理它）

如果您只需要从每列中选择一个checkboxes，我建议您使用radio-buttons。如果不能，就改成if ( no1 !=1 && no2 != 1 && no3 != 1 )

Answer 2

如何修改它以仅在每列中的一个复选框被选中时仍提交。

您应该使您的所有checkbox 具有通用名称。然后用名字迭代checkbox，使用document.getElementsByName('name')

您的html 应该如下所示：

150-180 180-200

var chkBox = document.getElementsByName('taxo');

for (var i = 0; i < chkBox.length; i++){
     if (chkBox.checked == true){

         submitForm();

         break;
     }
}

function submitForm(){
    //submit form
}