我在jQuery上相当新,所以当我从我的选择下拉列表中选择一个选项时,我试图自动更改单选框的值。但它没有按照我的计划进行。
例如: 如果我从选择的选项中选择太太或女士,那么带有女性价值的收音机的属性应该成立。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('[name="title"]').change(function() {
if ($(this).val() == "Ms." || $(this).val() == "Mrs.") {
$("#female").prop("checked", true);
} else if ($(this).val() == "Mr.") {
$("#male").prop("checked", true);
}
});
</script>
</head>
<body>
<select name="title">
<option value="" disabled selected>Choose your option</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<label>Title</label>
<p><b>Gender</b>
<br/>
</p>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</body>
<html>
答案 0 :(得分:0)
您的代码似乎是正确的。尝试使用document.ready,或将其加载到正文的末尾。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('[name="title"]').change(function() {
if ($(this).val() == "Ms." || $(this).val() == "Mrs.") {
$("#female").prop("checked", true);
} else if ($(this).val() == "Mr.") {
$("#male").prop("checked", true);
}
});
});
</script>
</head>
<body>
<select name="title">
<option value="" disabled selected>Choose your option</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<label>Title</label>
<p><b>Gender</b>
<br/>
</p>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</body>
<html>
&#13;
答案 1 :(得分:0)
你错过了一个document.ready line。
this answer(这是如何使用jQuery定位单选按钮的解释),这是我使用你的代码让它在我的测试环境中工作的方式:
$(document).ready(initializePage);
function initializePage(){
$('[name="title"]').change(function() {
if ($(this).val() == "Ms." || $(this).val() == "Mrs.") {
$('input:radio[name=gender]')[1].checked = true;
} else if ($(this).val() == "Mr.") {
$('input:radio[name=gender]')[0].checked = true;
}
});
}