复选框功能仅适用于row1，当从数据库添加多行时，它会显示复选框但复选框功能对他们不起作用
function selectOnlyThis(id) {
for (var i = 1; i <= 2; i++) {
document.getElementById(i).checked = false;
}
document.getElementById(id).checked = true;
}
function myFunction() {
var x = document.getElementById("demo");
x.style.color = "blue";
}
function myFunction1() {
var x = document.getElementById("demo");
x.style.color = "Red";
}.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;
}<link href="http://fonts.googleapis.com/css?family=Exo:400,800" rel="stylesheet" type="text/css">
<body data-spy="scroll">
<!-- TOP MENU NAVIGATION -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" style="font-size:40px">
<img class="" alt="" style="padding-top:10px;padding-left:40px;width:50px;height:40px;" src="img/icon.png"> </img>
Welcome to Electronic Notice Board
</div>
<div class="container">
<a class="brand pull-left" href="#" style="color:Grey;padding-left:10px;"></a>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse"></div>
</div>
</div>
</div>
<br>
<br>
<br>
<!-- MAIN CONTENT -->
<div class="" id="home">
<!-- HOME -->
<div class="row-fluid">
<!-- PHONES IMAGE FOR DESKTOP MEDIA QUERY -->
<div class="span3 visible-desktop">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/slide1.jpg" class="img-responsive">
<div class="carousel-caption">
<h3>WELCOME</h3>
<p>UIIT Department</p>
</div>
</div>
<div class="item">
<img src="img/slide2.jpg" class="img-responsive">
</div>
<div class="item">
<img src="img/slide3.jpg" class="img-responsive">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<ul>
<button class="btn btn-primary" style="font-size:20px;">Student Information</button>
</ul>
<?php
$link = mysqli_connect("localhost","root","","timetable");
if($link) {
//echo "coonected succesfuuly";
}
$query1 ="select * from notice";
$run = mysqli_query($link,$query1);
while($row = mysqli_fetch_assoc($run)){
?>
<ul>
<li style="color:grey; font-size:25px;line-height:1.5; ">
<?php echo $row['student_notice']; ?>
</li>
</ul>
<?php } ?>
<ul>
<button class="btn btn-primary" style="font-size:20px;"> News & Events</button>
</ul>
<marquee id="test" behavior="auto" direction="up" height="auto" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" style=" width:400px;height:320px;text-align:justify;">
<?php
$link = mysqli_connect("localhost","root","","timetable");
if($link) {
//echo "coonected succesfuuly";
}
$query1 ="select * from event";
$run = mysqli_query($link,$query1);
while($row = mysqli_fetch_assoc($run)){
?>
<p>
<a href="#" style="color:grey; font-size:25px;line-height:2;"><img src="img/New.gif" style="width:20px; height:20px; font-size:18px; text-align:; ">
<?php echo $row['event']; ?>
</a>
</p>
<?php } ?>
</marquee>
<br><br>
<table border="3px" align="center" width: "" style="font-size:15px;height:350px;width:400px;">
<tr>
<td style="text-align:center;color:grey;background-color:lightblue;font-size:22px">
<B> Time: </B> </td>
<td Style=" border:3px;text-align:center;font-size:20px">
<select style="text-align:center;color:grey;background-color:lightblue;font-size:20px;width:200px; height:60px;">
<option > 8:00 AM to 9:20 AM </option>
<option > 9:30 AM to 10:20 AM</option>
<option> 10:30 AM to 11:20 AM</option>
<option> 11:30 AM to 12:20 PM</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;color:grey;background-color:lightblue;font-size:22px">
<B> Total Class: </B> </td>
<td Style=" border:3px;">
<select style="text-align:center;color:grey;background-color:lightblue;font-size:20px;width:200px; height:60px;">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6 </option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:center;color:grey;background-color:lightblue;font-size:22px">
<B> Class being Held: </B>
</td>
<td Style=" border:3px;">
<select style="text-align:center;color:grey;background-color:lightblue;font-size:20px;width:200px; height:60px;">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6 </option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
</select>
</td>
</tr>
</tr>
<tr>
<td style="text-align:center;color:grey;background-color:lightblue;font-size:22px">
<B> Cancel Class: </B>
</td>
<td Style="border:3px;">
<select style="text-align:center;color:grey;background-color:lightblue;font-size:20px;width:200px; height:60px;">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option> 8</option>
<option>9</option>
<option>10</option>
<option>11</option>
</select>
</td>
</tr>
</table>
<br>
<table border="3px" align="center" style="font-size:15px;height:350px;width:400px ">
<tr>
<tr>
<td style="text-align:center;color:grey;background-color:lightblue;font-size:22px">
<B>Rescheduled Class:</B> </td>
</tr>
<?php
//$day1=date("l");
// $shift1='morning';
$day1=$_POST['selectday'];
$shift1=$_POST['selectshift'];
// echo date('e');
//$date11=date('d-m-Y');
//$date11=$_POST['date'];
//echo "$date11";
$link = mysqli_connect("localhost","root","","timetable");
if($link) {
//echo "coonected succesfuuly";
}
$query1 ="SELECT * from rescheduleclass where shift='$shift1' && day='$day1' ";
$run = mysqli_query($link,$query1);
while($row = mysqli_fetch_assoc($run)){
?>
<tr>
<td style="font-size:18px; width:450px;">
<B> <?php echo $row['reclass1']; ?> </B> </td>
</tr>
<tr>
<td style="font-size:18px; width:450px;">
<B> <?php echo $row['reclass2']; ?> </B> </td>
</tr>
<tr>
<td style="font-size:18px; width:450px;">
<B> <?php echo $row['reclass3']; ?> </B> </td>
</tr>
<?php
}
?>
</table>
</div>
<!-- APP DETAILS -->
<div class="span3">
<!-- ICON -->
<div class="visible-desktop" id="icon">
<?php
// $day1=date("l");
// $shift1='morning';
$day1=$_POST['selectday'];
$shift1=$_POST['selectshift'];
?>
<h1 style="text-align:center;font-size:20px; color:red;"> Time Table Spring-2017 Semester (Morning)
<button class="btn btn-primary" type="" style="position:center;font-size:20px;"><?php echo $day1; ?> </button> </h1>
<div class="table-responsive">
<table width="1300" heigth="900" border="1">
<tr>
<th scope="col" style="color:black;background-color:lightblue;">
<B> Class </B>
</th>
<th scope="col" style="color:black;background-color:lightblue;"> 8:30 AM to 9:20 AM</th>
<th scope="col" style="color:black;background-color:lightblue;"> 9:30 AM to 10:20 AM</th>
<th scope="col" style="color:black;background-color:lightblue;"> 10:30 AM to 11:20 AM</th>
<th scope="col" style="color:black;background-color:lightblue;"> 11:30 AM to 12:20 PM</th>
</tr>
<?php
//$day1=date("l");
// $shift1='morning';
$shift1=$_POST['selectshift'];
$day1=$_POST['selectday'];
//$shift1=$_POST['shift'];
$link = mysqli_connect("localhost","root","","timetable");
if($link) {
//echo "coonected succesfuuly";
}
$query1 ="select * from timetable_morning where shift='$shift1'&& day='$day1'";
$run = mysqli_query($link,$query1);
while($row = mysqli_fetch_assoc($run)){
?>
<tr>
<td scope="col" style="border: 1px solid ;text-align: left;padding: 8px;color:black; background-color:grey;">
<button style="width:150px; height:50px; background-color:lightblue; color:black; font-weight:900px; font-size:16px; font-family:Comic Sans MS;" onclick="this.style.backgroundColor = 'red';" ondblclick="this.style.backgroundColor = 'lightblue';"><B> <?php echo $row['class']; ?> </B></button>
</td>
<td scope="col" style="border: 1px solid ;text-align: left;padding: 8px;color:black; background-color:pink;">
<h3 id="demo"> Class:
<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>
</div>
</div>
</h3>
<?php echo $row['slot1']; ?>
</td>
<td scope="col" style="border: 1px solid ;text-align: left;padding: 8px; color:black; background-color:grey;">
<button style="width:320px; height:50px; background-color:white; color:black; font-weight:900px; font-size:16px; font-family:Comic Sans MS;" onclick="this.style.backgroundColor = 'red';" ondblclick="this.style.backgroundColor = 'lightgreen';"> <?php echo $row['slot2']; ?> </button>
</td>
<td scope="col" style="border: 1px solid ;text-align: left;padding: 8px;color:black; background-color:grey;">
<button style="width:320px; height:50px; background-color:white; color:black; font-weight:900px; font-size:16px; font-family:Comic Sans MS; " onclick="this.style.backgroundColor = 'red';" ondblclick="this.style.backgroundColor = 'lightgreen';"> <?php echo $row['slot3']; ?> </button>
</td>
<td scope="col" style="border: 1px solid ;text-align: left;padding: 8px; color:black; background-color:grey;">
<button style="width:320px; height:50px; background-color:white; font-weight:900px; font-size:16px; color:black; font-family:Comic Sans MS; " onclick="this.style.backgroundColor = 'red';" ondblclick="this.style.backgroundColor = 'lightgreen';"> <?php echo $row['slot4']; ?> </button>
</td>
</tr>
<?php
}
?>
</table>
<!-- end slider -->
</div>
</div>
</div>
<!-- APP NAME -->
</div>
<!-- FOOTER -->
<div class="footer container container-fluid">
<!-- COPYRIGHT - EDIT HOWEVER YOU WANT! -->
<div id="copyright">© Copyright 2017 <a href="#">UIIT @ PMAS AAUR </a>. All Rights Reserved</div>
<!-- CREDIT - PLEASE LEAVE THIS LINK! -->
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script src="js/init.js"></script>
</body>
</html>
答案 0 :(得分：0)
在下面的功能
function selectOnlyThis(id) {
for (var i = 1; i <= 2; i++) {
document.getElementById(i).checked = false;
}
document.getElementById(id).checked = true;
}
当你执行getElementById时，它总是会让你获得匹配给定id的DOM上的第一个元素。 因此它不适用于第二行及以上行。
你可以更通用，只通过＆＃34;这个＆＃34;而不是＆＃34; this.id＆＃34;
function selectOnlyThis(elem) {
var parentDiv = elem.parentElement.parentElement;
var buttons = parentDiv.getElementsByTagName("input");
for(var i =0; i< buttons.length; i++){
if(buttons[i] !== elem)
buttons[i].checked = false;
}
elem.checked = true;
}