Question

我有一个关于自定义一组复选框的javascript代码。然而，结果不是我想要的。它几乎有90％。

这是我将在下面解释它的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>checkboxes</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<script language="javascript">
function SingleSelect(regex,current)
{
re = new RegExp(regex);

for(i = 0; i < document.forms[0].elements.length; i++) {

elm = document.forms[0].elements[i];

if (elm.id == 'class') {

elm.checked = false;

}
}

current.checked = true;

 }
/script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<br/>Class 1
<input type="checkbox" id="class" name="cat[]" value="class 1" checked    onclick="SingleSelect('chk',this);" />
<br/>Class 2<input type="checkbox" id="class" name="cat[]" value="class 2" onclick="SingleSelect('chk',this);" />
<br/>Class 3<input type="checkbox" id="class" name="cat[]" value="class 3" onclick="SingleSelect('chk',this);" />
<br/>Class 4<input type="checkbox" id="cat" name="cat[]" value="class 4"  />
<br/>Class 5<input type="checkbox" id="cat" name="cat[]" value="class 5"  />
<br/>Class 6<input type="checkbox" id="cat" name="cat[]" value="class 6"  />
<br/>Class 7<input type="checkbox" id="cat" name="cat[]" value="class 7"  />
</td>
</tr>
</table>
</form>
</body>
</HTML>

此代码包含从第1类到第7类的7复选框。目前，对于第1类，第2类和第3类，它希望允许用户只选择一个。这就是我想要的。

对于4级，5级，6级和7级，它允许用户选择多个或单个或保留它。

然而我想要的是：

在第1类，第2类和第3类中，用户只能选择1或不选择。

在第4类，第5类，第6类和第7类中，我不介意用户选择多个还是单个或保留它。但在7个选项中，用户必须至少选择1才能提交，否则应该有一条错误消息要求他们选择。

任何人都可以帮我编辑javascript代码吗？或指导我如何取消选中复选框的Class 1，Class 2和Class 3 Group复选框。

非常感谢提前

CHeers

Answer 1

对于1,2,3课你可以这样做

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
        <script type="text/javascript">
            function test(e) {

                if (e.checked) {
                    var get = e.id;

                    for (i = 0; i < document.forms[0].elements.length; i++) {
                        var getting = document.forms[0].elements[i];
                        getting.checked = false;

                    }
                    e.checked = true;

                    }


            }
        </script>
    </head>
    <body>
    <form id="Form1" method="get">
    <input type="checkbox" id="Checkbox1"  name="test[]" value="1" onclick="test(this)"/>
    <input type="checkbox" id="Checkbox2"  name="test[]" value="1" onclick="test(this)"/>
    <input type="checkbox" id="Checkbox3"  name="test[]" value="1" onclick="test(this)"/>

    </form>
    </body>
    </html>

Answer 2

您不应多次使用相同的ID。

Answer 3

这个javascript应该适合你：

<script language="javascript">
// fix form so that only one of the first three is clicked at a time.
// return false if form has no elements clicked.
function validateForm(clickedElement) {
 var myForm = document.forms[0]; // consider document.getElementById("Form1");
 var hasOneChecked = false;
 var clickedFirstThree = (myForm != clickedElement);
 var i;
 for(i = myForm.elements.length - 1; i >= 0 ; i--) {
  var elem = myForm.elements[i];
  if(i >= 3 && elem == clickedElement) {
   clickedFirstThree = false;
  }
  if(clickedFirstThree && i < 3) {
   if(elem != clickedElement) {
    elem.checked = false;
   }
  }
  if (elem.checked) {
   hasOneChecked = true;
  }
 }
 return hasOneChecked
}

// validate the form and alert the user if there is a problem
function SingleSelect(e) {
 var isValid = validateForm(e);
 if(!isValid) {
  alert("Please check at least one item.");
 }
 return isValid;
}
</script>

但请注意，您需要更改所有输入以包含

onclick="SingleSelect(this);"

有了这段代码，我认为这里的其他答案给了你很多关于如何改进页面其他部分的好建议。有些事情需要考虑：

每个id属性都应该是唯一的
包含单个数据的表格非常无用
格式化代码将使其更易于阅读
请记住正确关闭所有标签（不要丢失尖括号）
考虑将type="text/javascript"添加到您的脚本代码中。
如果您想使用<br />

Answer 4

也许不是您正在寻找的答案，但是分解不同类型的输入并不容易。然后，您可以进行服务器端（客户端或两者）验证，至少选择其中一个选项1-7。

例如，使用前三个（Class1，Class2和Class3）的单选按钮。只需使用4到7类的复选框。

<input type="radio" name="none" value="None" checked>No choice for 1-3<br>
<input type="radio" name="class1" value="class1">Class1<br/>
<input type="radio" name="class2" value="class2">Class2<br/>
<input type="radio" name="class3" value="class3">Class3<br/>

<input type="checkbox" name="class4" value="Class4">Class4<br/>
...
<input type="checkbox" name="class7" value="Class7">Class7<br/>

如果我想取消选中复选框，如何更正此JavaScript？

4 个答案: