如果要取消选中复选框，如何更正此javascript？_Javascript_Checkbox

如果要取消选中复选框，如何更正此javascript？

javascript checkbox

如果要取消选中复选框，如何更正此javascript？,javascript,checkbox,Javascript,Checkbox,我有一个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" n

我有一个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>


复选框
函数SingleSelect（正则表达式，当前）
{
re=新的RegExp（regex）；
对于（i=0；i

一级

二级

三级

第4类

第5类

第6类

第7类

此代码由7个复选框组成，从类别1到类别7。目前，对于类1、类2和类3，它只允许用户选择一个。这就是我想要的

对于4类、5类、6类和7类，它将允许用户选择多个或单个或离开

然而，我想要的是：

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

在第4类、第5类、第6类和第7类中，我不介意用户选择多个还是单个，或者不选择。但在7个选项中，用户必须至少选择1个才能提交，否则会出现错误消息，要求他们选择某个选项

有人能帮我编辑javascript代码吗？？或者指导我如何取消选中类别1、类别2和类别3组复选框的复选框

非常感谢

干杯

你不应该多次使用同一个ID。

也许不是你想要的答案，但是把不同类型的输入分开不是更容易吗。然后，您可以进行服务器端（客户端或两者）验证，以确保至少选择了选项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/>

1-3无选择

类别1

类别2

类别3

类别4

...
类别7

也许不是你想要的答案，但是将不同类型的输入分开不是更容易吗。然后，您可以进行服务器端（客户端或两者）验证，以确保至少选择了选项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/>

1-3无选择

类别1

类别2

类别3

类别4

...
类别7

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


无标题页
功能测试（e）{
如果（e.checked）{
var-get=e.id；
对于（i=0；i

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


无标题页
功能测试（e）{
如果（e.checked）{
var-get=e.id；
对于（i=0；i

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

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

每个

id

属性都应该是唯一的

包含单个数据段的表是非常无用的

格式化代码将使其更易于阅读

请记住正确关闭所有标签（无丢失的尖括号）

考虑将

type=“text/javascript”

添加到脚本标记中

如果您想使用像

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