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

Show warning on form submit if no checkbox is check JavaScript

本文关键字：显示 警告 表单提交 复选框 如果没有      更新时间：2023-09-26

我在表单上放置了一个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的复选框-我只需要选中其中一个就可以提交表单。

<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>

对您的原始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，并且由于你的标记(根本没有改变，因为你说它都是由一个插件生成的)有一些限制。

无论如何，这里也是一个例子

(注意:必须为最后一列做两次for，因为我们的名字不同…)

(注2:如果你也可以使用jQuery，我可以把它清理得很好)

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

我如何修改它，使它仍然只在每列中的一个复选框被选中时提交。

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

你的html应该看起来像这样:

150 - 180180 - 200 

var chkBox = document.getElementsByName('taxo');
for (var i = 0; i < chkBox.length; i++){
     if (chkBox.checked == true){
         submitForm();
         break;
     }
}
function submitForm(){
    //submit form
}
相关文章：