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

问题描述：

我有一个关于自定义一组复选框的JavaScript代码。但结果不是我所期待的。其中近90％。如果我想取消选择复选框，我该如何更正此JavaScript？

这是我来解释一下它的代码：

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

此代码由7复选框，从1级到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复选框。

在此先感谢非常

欢呼

没有经过整个事情读，但“/ SCRIPT>”跳出。 – Corbin 2012-04-03 06:00:10

你想要的不是通过你的问题来做什么。如何取消复选框？即如果检查2是检查检查1和检查3应该取消选择 – 2012-04-03 06:11:55

@ KunalVashist对于糟糕的结构对不起，这样做直到上午7点才睡觉...所以也许我的问题是不合逻辑的正确..但我看到你的解决方案...它适合我的情况。 – Hubert 2012-04-03 11:39:36

答

这个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"添加到脚本标记中。
考虑更改DOCTYPE为XHTML，如果你想使用自闭标签，如<br />

感谢您的解决方案...我试了一下，它的工作......嗯，但我可以问一些只是为了学习的目的？在这个函数中SingleSelect（e）'为什么是e？我是正确的'onclick =“SingleSelect（this）;''是这样的函数，如果用户取消选中最后一个复选框的消息'请检查至少一个项目'。会出现？ – Hubert 2012-04-03 11:33:12

然而，如果我希望消息只出现在点击提交，我可以把'onclick =“SingleSelect（this）;''放入到'？ – Hubert 2012-04-03 11:35:41

e代表元素吗？ – Hubert 2012-04-03 11:57:56

答

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

噢是啊......这条规则溜走了我的脑海......感谢提醒 – Hubert 2012-04-03 11:36:25

答

也许不是你正在寻找的答案，但不是更容易拆分不同类型的输入。然后，您可以进行服务器端（客户端或两者）验证，至少选择了其中一个选项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/>

嗨我试过这种方法......但是当插入数据到数据库时，它失败了非常...... 转到下一页，我添加'$ class = $ _ POST ['class']'单选按钮的名称是一样的...我认为我在那部分是错误的......但是当我选择None时，系统仍然插入值没有进入数据库这是不是我所期望的...但我认为它是因为我的if else声明不符合逻辑...所以我虽然改变所有复选框和限制选择将是最好的选择......但最有可能的我错了 – Hubert 2012-04-03 11:16:41

只是一个例子，但我无法真正理解你的评论。如何处理你的表单输入是一个不同的问题。你可以将任何你喜欢的名字命名为“1-3的无选择”，只是不要在后台代码中使用那个保存数据的地方。希望你弄清楚，否则，抛出一个关于表单数据=> php的新问题。最好的问候，M – MackeiaN 2012-04-05 13:44:20

答

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

这工作正常......但如果我有一个usbmit按钮有任何JavaScript，我可以用来验证，如果有选择？ – Hubert 2012-04-03 12:05:08

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

相关推荐