JavaScript中的复选框验证

Question

I have written this script: 我写了这个脚本：

function getDays(select){
    var selectedString = select.options[select.selectedIndex].value;
    if(selectedString == 4)
    {
        document.getElementById("days_target").style.display = "block";
    }else {
        document.getElementById("days_target").style.display = "none";
    }
}

and in validateForm() function I have this: 在validateForm()函数中，我有以下内容：

var x=document.forms["form1"]["days"].value;
if (x==null || x=="" || x=="Select Days")
{
    alert("Oh, you forgot to select days! :)");
    return false;
}
var x=document.forms["form1"]["days"].value;
if(x=="4")
{
    var cnt = 0;
    for (var i = 7; i < document.day.elements.length; i++) {
        if (document.day.elements[i].type == 'checkbox') {
            if (document.day.elements[i].checked == true) {
                cnt++;
            }
        }
    }
    if (cnt == 0) {
        alert("Atleast 1 day Should be Selected.");
        return false;
    }
}

HTML like this: 这样的HTML：

<b>Please enter days required</b><br/>
<select name="days" id="days" style="width:200px;" onchange="getDays(this)">
    <option value="Select Days" selected>Select Days</option>
    <option value="1">Mon-Fri</option>
    <option value="2">Mon-Fri</option>
    <option value="3">Mon-Fri</option>
    <option value="4">Bespoke Days</option>
</select><br/><br/>
<div id="days_target" style="display:none;">
    <b>Select Days</b><br/>
    <input type="checkbox" name="day" value="mon"/>Mon &nbsp;&nbsp;<input type="checkbox" name="day" value="tue"/>Tue<br/>
    <input type="checkbox" name="day" value="wed"/>Wed &nbsp;&nbsp;<input type="checkbox" name="day" value="thr"/>Thr<br/>
    <input type="checkbox" name="day" value="fri"/>Fri &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="day" value="sat"/>Sat<br/>
    <input type="checkbox" name="day" value="sun"/>Sun<br/><br/>
</div>

If I select Bespoke days then that check boxes appear and if none is checked then I want to display error message "Atleast one day should be selected." 如果我选择“定制日期”，则会显示该复选框，如果未选中任何复选框，则我想显示错误消息“应选择“至少一日”。 How to do this? 这个怎么做？

Answer 1

The after function in jquery would allow you to easily do this. jQuery中的after函数可以让您轻松地做到这一点。 This would require two steps. 这将需要两个步骤。

Load Jquery by putting this inside your header tag in the HTML ( <head></head> ): 通过将其放入HTML（ <head></head> ）的header标记中来加载Jquery：
```
 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
```
Add javascript in the validation when the condition is not met: 不满足条件时在验证中添加javascript：
```
 $('#days').after('<label class="error">Atleast one day should be selected.</label.'); 
```

Additionally, you will want the error message to go away when the validation rules are met. 此外，当您满足验证规则时，您将希望错误消息消失。

$('.error').remove();

You will probably want to adjust the HTML/CSS for displaying purposes, but that should be enough to get you going. 您可能需要调整HTML / CSS以用于显示目的，但这应该足以使您前进。

Answer 2

You are accessing the checkboxes incorrectly. 您正在错误地访问复选框。 Forms have elements. 表单具有元素。 Also you start from 7 and count up instead of from 0 and count up or from 6 and count down 同样，您从7开始计数，而不是从0开始计数，然后从6开始计数。

var day = document.forms["form1"].day;
for (var i = 0; i < day.length; i++) {
    if (day[i].type == 'checkbox') {
        if (day[i].checked == true) {
            cnt++;
        }
    }
}

I would do it like this: 我会这样做：

Live Demo 现场演示

var x=document.forms["form1"]["days"].selectedIndex;
if (x<1) {
  alert("Please select days");
  return false;
}
else if(x==4) { // fifth entry 
  var checked = false, chk = document.forms["form1"]["day"];
  for (var i = 0; i < chk.length; i++) {
    if (chk[i].checked) { checked=true; break }
  }
  if (!checked) {
     alert("At least one day should be checked.");
     return false;
  }
}

JavaScript中的复选框验证

问题描述

2 个解决方案

解决方案1
0 2013-05-06 13:12:56

解决方案2
0 2013-05-06 13:13:48

JavaScript中的复选框验证

问题描述

2 个解决方案

解决方案1 0 2013-05-06 13:12:56

解决方案2 0 2013-05-06 13:13:48

解决方案1
0 2013-05-06 13:12:56

解决方案2
0 2013-05-06 13:13:48