當我選擇相同標簽的新復選框時，第二個標簽的復選框未取消選擇選項
[英]Checkbox of second label are not deselecting option when i select new checkbox of same label
問題描述
<script> function selectOnlyThis2(id) { for (var i = 1;i <= 3; i++) { document.getElementById(i).checked = false; } document.getElementById(id).checked = true; } function myFunction3() { var x = document.getElementById("demo2"); x.style.color = "blue"; } function myFunction4() { var x = document.getElementById("demo2"); x.style.color = "Red"; } function myFunction5() { var x = document.getElementById("demo2"); x.style.color = "Orange"; } </script>
<style> .dropbtn { background-color: #4CAF50; color: white; padding: 6px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } .myCheckbox2 { margin-left:4px; } </style>
<html> <head> <title> Coutning the checkbox </title> <style> .dropbtn { background-color: #4CAF50; color: white; padding: 6px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #3e8e41; } .myCheckbox2 { margin-left:4px; } </style> </head> <body> <form action="checkboxcount.php" method="POST"> <h3 id = "demo"> Boilogy: <div class="dropdown"> <button class="dropbtn">Class Option</button> <div class="dropdown-content"> <a href="#"><input type="checkbox" id="1" onclick="myFunction(); selectOnlyThis(this.id); " value = "box1" name="checkbox[]" Size="12"><label for="1">Held</label></input></a> <a href="#"><input type="checkbox" id="2" onclick="myFunction1(); selectOnlyThis(this.id); " value = "box2" name="checkbox[]" Size="12"><label for="2">Cancel</label></input></a> <a href="#"><input type="checkbox" id="3" onclick="myFunction2(); selectOnlyThis(this.id); " value = "box3" name="checkbox[]" Size="12"><label for="3">Reschedule</label></input> </a> </div> </div> <script> function selectOnlyThis(id) { for (var i = 1;i <= 3; i++) { document.getElementById(i).checked = false; } document.getElementById(id).checked = true; } function myFunction() { var x = document.getElementById("demo"); x.style.color = "blue"; }</script> <script> function myFunction1() { var x = document.getElementById("demo"); x.style.color = "Red"; }</script> <script> function myFunction2() { var x = document.getElementById("demo"); x.style.color = "Orange"; } </script> </h3> <h3 id="demo2" >General Science: <div class="dropdown"> <button class="dropbtn">Class Option</button> <div class="dropdown-content"> <a href="#"><input type="checkbox" id="4" onclick="myFunction3(); selectOnlyThis2(this.id);" value = "box4" name="checkbox[]" Size="12"><label for="4">Held</label></input></a> <a href="#"><input type="checkbox" id="5" onclick="myFunction4(); selectOnlyThis2(this.id);" value = "box5" name="checkbox[]" Size="12"><label for="5">Cancel</label></input></a> <a href="#"><input type="checkbox" id="6" onclick="myFunction5(); selectOnlyThis2(this.id);" value = "box6" name="checkbox[]" Size="12"> <label for="6">Reschedule</label></input></a> </div> </div> <script> function selectOnlyThis2(id) { for (var i = 1;i <= 3; i++) { document.getElementById(i).checked = false; } document.getElementById(id).checked = true; } function myFunction3() { var x = document.getElementById("demo2"); x.style.color = "blue"; } function myFunction4() { var x = document.getElementById("demo2"); x.style.color = "Red"; } function myFunction5() { var x = document.getElementById("demo2"); x.style.color = "Orange"; } </script> </h3> <h3>Physics: <input type="checkbox" value = "box" name="checkbox[]" Size="12"></input></h3> <h3>Gender studies: <input type="checkbox" value = "box" name="checkbox[]" Size="12"></input></h3> <h3>Click on the Button to save values</h3> <button>Save Information</button> </form> </html>
1 個解決方案
解決方案1
0 已采納 2017-08-03 09:00:47
第二個選擇中的ID是4,5,6但是您使用1,2,3 。
對於修復它：
變更：
function selectOnlyThis2(id) {
for (var i = 1;i <= 3; i++)<---------------
至 ：
function selectOnlyThis2(id) {
for (var i = 4;i <= 6; i++)<-----------------
復選框圖像標簽選擇僅在懸停時應用的效果，未選中時
[英]Checkbox image label Select effect only applying on hover, not when checked
無法單擊標簽以選擇具有Bootstrap復選框布局的復選框
[英]Can't click on label to select checkbox with Bootstrap checkbox layout
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.