如果我想取消選擇複選框，我該如何更正此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複選框。

在此先感謝非常

歡呼

來源

2012-04-03 Hubert

沒有經過整個事情讀，但「/ 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 />

來源

2012-04-03 07:04:22 Cameron

感謝您的解決方案...我試了一下，它的工作......嗯，但我可以問一些只是爲了學習的目的？在這個函數中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。

來源

2012-04-03 06:04:40

噢是啊......這條規則溜走了我的腦海......感謝提醒 – 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/>

來源

2012-04-03 06:08:36 MackeiaN

嗨我試過這種方法......但是當插入數據到數據庫時，它失敗了非常...... 轉到下一頁，我添加'$ 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>

來源

2012-04-03 06:43:54

這工作正常......但如果我有一個usbmit按鈕有任何JavaScript，我可以用來驗證，如果有選擇？ – Hubert 2012-04-03 12:05:08

如果我想取消選擇複選框，我該如何更正此JavaScript？

回答

相關問題