Question

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

工作小提琴 https://jsfiddle.net/w4175ubx/

Answer 1

第二个选择中的

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++)<-----------------

Demo

当我选择相同标签的新复选框时，第二个标签的复选框不会取消选择选项

1 个答案: