我有一个页面使用一些jquery ui来设置一些单选按钮的样式。当用户选择一个时，jquery将识别哪个被选中，然后更改下面相应div的背景颜色（最终，他们实际上将调用.load来填充div，其中包含动态页面的内容。网站，但现在，只是为div着色很好。）
它在Firefox中运行得很好，但在Internet Explorer（或某些人称之为Internet Exploder）中，它抱怨'radio1'未定义。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Button - Checkboxes</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function() {
$(function() {
$( "#radio" ).button();
$( "#format" ).buttonset();
});
$('input:radio').change(function(){
if($(radio1).is(':checked')){
$("#first").css("background-color","yellow");
$("#second").css("background-color","white");
$("#third").css("background-color","white");
}else if($(radio2).is(':checked')){
$("#first").css("background-color","white");
$("#second").css("background-color","red");
$("#third").css("background-color","white");
}else if($(radio3).is(':checked')){
$("#first").css("background-color","white");
$("#second").css("background-color","white");
$("#third").css("background-color","blue");
} else {
$("#first").css("background-color","white");
$("#second").css("background-color","white");
$("#third").css("background-color","white");
}
});
});
</script>
<style>
#format { margin-top: 2em; }
</style>
</head>
<body>
<form>
<div id="format">
<input type="radio" id="radio1" name="radio" checked="checked" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
<!-- The following divs will end up being populated via an ajax call based on checkbox selections -->
<!-- Ultimately, checking a given checkbox should toggle the corresponding div -->
<div id="first">
First Div
</div>
<div id="second">
Second Div
</div>
<div id="third">
Third Div
</div>
</body>
</html>
答案 0 :(得分：3)
选择器应使用id选择器访问单选按钮。我不知道这在FF中是如何工作的。
$('input:radio').change(function(){
if($("#radio1").is(':checked')){
$("#first").css("background-color","yellow");
$("#second").css("background-color","white");
$("#third").css("background-color","white");
}else if($("#radio2").is(':checked')){
$("#first").css("background-color","white");
$("#second").css("background-color","red");
$("#third").css("background-color","white");
}else if($("#radio3").is(':checked')){
$("#first").css("background-color","white");
$("#second").css("background-color","white");
$("#third").css("background-color","blue");
} else {
$("#first").css("background-color","white");
$("#second").css("background-color","white");
$("#third").css("background-color","white");
}
});