javascript - 如果没有选中 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，我可以很好地清理它)

如果您只需要从每一列中选择一个复选框，我建议使用单选按钮。如果不行，只需将其更改为 if ( no1 !=1 && no2 != 1 && no3 != 1 )