1
<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> \t
</form>
</html>ワーキングフィドル https://jsfiddle.net/w4175ubx/
コードを提供するだけでなく、説明だけでなくタイトルにも質問を追加してください。 – sebastian
ラジオボタンを使用していないのはなぜですか？あなたのコードの下にこのフィドルを貼り付けてください。https://jsfiddle.net/w4175ubx/ – Gezzasa
問題は解決しましたが、コメントをいただきありがとうございます。次回はコメントを投稿します – kakarot