我的 html 文件有问题。我在页面中有一个数据表,表中的每一行都有一个包含两个单选按钮的列。应始终选择一个单选按钮。
现在的问题是在 IE8 下一切正常,但是当我切换到 IE9+/Safari/FireFox 时,表中的第一对单选按钮似乎没有被选中。我检查了源代码,它确实说明了这一点
<input type="radio" checked name="radio_10" onchange="chgRadio('aaa','2')" value="2"></input>
<input type="radio" name="radio_10" onchange="chgRadio('aaa','1')" value="1"></input>
所以有点奇怪,为什么选中的按钮不能在页面上呈现?
这里我附上这个html文件的源代码,在代码中我在javascript中包含了一个jquery文件,一旦我删除了这个文件,即使在Safari/Firefox下,所有的单选按钮也可以正确呈现。所以我只是想知道 jquery 和浏览器版本之间的兼容性是否存在问题?对css进行一些更改是否有帮助?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="jquery/ui/css/sunny/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/mrbs-page.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/mrbs-table.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/ColReorder.css" rel="stylesheet" type="text/css">
<link href="jquery/datatables/css/ColVis.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/mrbs.css.php" type="text/css">
<link rel="stylesheet" media="print" href="css/mrbs-print.css.php" type="text/css">
<!--[if IE]>
<link rel="stylesheet" href="css/mrbs-ie.css" type="text/css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="css/mrbs-ie8.css" type="text/css">
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/mrbs-ielte8.css" type="text/css">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/mrbs-ielte7.css.php" type="text/css">
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" href="css/mrbs-ielte6.css" type="text/css">
<![endif]-->
<meta name="robots" content="noindex">
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-1.8.22.custom.min.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-i18n.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en.js"></script>
<script type="text/javascript" src="jquery/ui/jquery-ui-datepicker-en-US.js"></script>
<script type="text/javascript">
//<![CDATA[
var lteIE6 = false;
//]]>
</script>
<!--[if lte IE 6]>
<script type="text/javascript">
//<![CDATA[
var lteIE6 = true;
//]]>
</script>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
var lteIE7 = false;
//]]>
</script>
<!--[if lte IE 7]>
<script type="text/javascript">
//<![CDATA[
var lteIE7 = true;
//]]>
</script>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
var lteIE8 = false;
//]]>
</script>
<!--[if lte IE 8]>
<script type="text/javascript">
//<![CDATA[
var lteIE8 = true;
//]]>
</script>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
function init(params)
{
}
</script>
<script type="text/javascript" src="jquery/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="jquery/datatables/js/ColReorder.min.js"></script>
<script type="text/javascript" src="jquery/datatables/js/ColVis.mrbs.min.js"></script>
<script type="text/javascript" src="jquery/datatables/js/FixedColumns.mrbs.js"></script>
<script type="text/javascript" src="jquery/datatables/js/plugins.js"></script>
<script type="text/javascript" src="js/datatables.js.php?area="></script>
<script type="text/javascript" src="js/edit_users.js.php?area="></script>
<script type="text/javascript" src="js/functions.js.php?area="></script>
<script type="text/javascript" src="js/datepicker.js.php?area="></script>
<script type="text/javascript" src="js/general.js.php?area="></script>
</head>
<body class="non_js edit_users">
<script type="text/javascript">
//<![CDATA[
$('body').addClass('js').removeClass('non_js');
//]]>
</script>
<div id="contents">
<script type="text/javascript">
var changes = new Array();
function delConfirm(id,name) {
var r = confirm("Are you sure to delete user "+name+" ?");
if (r)
window.location="edit_users.php?Action=Delete&Id="+id;
}
function delAlert(){
alert("This is the last admin in the system, you cannot delete it!")
}
function chgRadio(name,role){
var group = new Array();
var exist = false;
for(i=0;i<changes.length;i++){
if(changes[i][0]==name){
changes[i].push(role==1?"user":"admin");
exist = true;
}
}
if (!exist){
group.push(name,role==1?"user":"admin");
changes.push(group);
}
}
function chgConfirm(Action){
var makechg = false;
if (changes.length==0){
var s="No users selected to change roles.";
}
else {
var s="Change\n";
for (i=0; i<changes.length; i++) {
var name= changes[i];
if(name.length == 2){
s+=name[0]+" to be "+name[1]+"\n";
makechg=true;
}
else{
if(changes.length==1) {
if(name[1]!=name[name.length-1]){
s="No users selected to change roles";
continue;
}
else{
s+=name[0]+" to be "+name[name.length-1]+"\n";
makechg=true;
}
}
else{
if(name[1]!=name[name.length-1]){
continue;
}
else{
s+=name[0]+" to be "+name[name.length-1]+"\n";
makechg=true; }
}
}
}
}
if (!makechg){
alert(s);
return false;
}
else {
var r = confirm(s);
if (r)
document.location.reload(true);
else{
document.getElementById("Action").value="nochg";
document.location.reload(true);
}
}
}
</script><br><br><h1 align="center">User list</h1>
<form id="form_user_list" class="form_user_list" name = "form_user_list" method="post"
action="edit_users.php">
<div id="user_list" class="datatable_container">
<table class="admin_table display" id="users_table">
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Current Role</th><th rowspan="2" width="50">Delete User</th>
</tr>
<tr><th width="80">Admin</th>
<th width="80">User</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a title="igor">igor</a></td>
<td><div><input type="radio" checked name="radio_10" onchange="chgRadio('igor','2')" value="2"></input></td>
<td><input type="radio" name="radio_10" onchange="chgRadio('igor','1')" value="1"></input></div></td>
<td><img src="images/delete.png" width="16" height="16" alt="Delete" title="Delete" onclick="delConfirm('10','igor')"></a>
</td>
</tr>
<tr>
<td>
<a title="nate">nate</a></td>
<td><div><input type="radio" checked name="radio_9" onchange="chgRadio('nate','2')" value="2"></input></td>
<td><input type="radio" name="radio_9" onchange="chgRadio('nate','1')" value="1"></input></div></td>
<td><img src="images/delete.png" width="16" height="16" alt="Delete" title="Delete" onclick="delConfirm('9','nate')"></a>
</td>
</tr>
<tr>
<td>
<a title="shahm6">shahm6</a></td>
<td><div><input type="radio" checked name="radio_4" onchange="chgRadio('shahm6','2')" value="2"></input></td>
<td><input type="radio" name="radio_4" onchange="chgRadio('shahm6','1')" value="1"></input></div></td>
<td><img src="images/delete.png" width="16" height="16" alt="Delete" title="Delete" onclick="delConfirm('4','shahm6')"></a>
</td>
</tr>
<tr>
<td>
<a title="test">test</a></td>
<td><div><input type="radio" checked name="radio_11" onchange="chgRadio('test','2')" value="2"></input></td>
<td><input type="radio" name="radio_11" onchange="chgRadio('test','1')" value="1"></input></div></td>
<td><img src="images/delete.png" width="16" height="16" alt="Delete" title="Delete" onclick="delConfirm('11','test')"></a>
</td>
</tr>