是否可以通过单击不相关的 html 元素来检查单选按钮,即。按钮、列表项或 anchor ?
我是 jquery 的新手,不确定我是否采用了正确的方法
这是我的 HTML
<ul>
<li>
<a href="#p1">
</a>
</li>
<li>
<a href="#p2">
</a>
</li>
<li>
<a href="#p3">
</a>
</li>
<ul class="package">
<li>
<input type="radio" name="Package1" id="Package1" value="Package 1">
<label for="Package1"> package 1</label>
</li>
<li>
<input type="radio" name="Package2" id="Package2" value="Package 2">
<label for="Package2"> package 2</label>
</li>
<li>
<input type="radio" name="Package3" id="Package3" value="Package 3">
<label for="Package3"> package 3</label>
</li>
和jquery
<script>
$(document).ready(function () {
$("#p1").click(function () {
$('input:radio[name=Package1]').prop('checked', true);
$('input:radio[name=Package2]').prop('checked', false);
$('input:radio[name=Package3]').prop('checked', false);
});
$("#p2").click(function () {
$('input:radio[name=Package2]').prop('checked', true);
$('input:radio[name=Package1]').prop('checked', false);
$('input:radio[name=Package3]').prop('checked', false);
});
$("#p3").click(function () {
$('input:radio[name=Package3]').prop('checked', true);
$('input:radio[name=Package1]').prop('checked', false);
$('input:radio[name=Package2]').prop('checked', false);
});
});
</script>
最佳答案
前提是可行的,但是您有一些语法错误。您的列表缺少关闭 </ul>
元素,并且您通过不存在的 ID 进行选择。这是一个工作示例:
$("#p1").click(function() {
$('input:radio[name=Package1]').prop('checked', true);
$('input:radio[name=Package2]').prop('checked', false);
$('input:radio[name=Package3]').prop('checked', false);
});
$("#p2").click(function() {
$('input:radio[name=Package2]').prop('checked', true);
$('input:radio[name=Package1]').prop('checked', false);
$('input:radio[name=Package3]').prop('checked', false);
});
$("#p3").click(function() {
$('input:radio[name=Package3]').prop('checked', true);
$('input:radio[name=Package1]').prop('checked', false);
$('input:radio[name=Package2]').prop('checked', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<a href="#p1" id="p1">1
</a>
</li>
<li>
<a href="#p2" id="p2">2
</a>
</li>
<li>
<a href="#p3" id="p3">3
</a>
</li>
</ul>
<ul class="package">
<li>
<input type="radio" name="Package1" id="Package1" value="Package 1">
<label for="Package1">package 1</label>
</li>
<li>
<input type="radio" name="Package2" id="Package2" value="Package 2">
<label for="Package2">package 2</label>
</li>
<li>
<input type="radio" name="Package3" id="Package3" value="Package 3">
<label for="Package3">package 3</label>
</li>
</ul>
关于jquery - 使用 jquery 检查来自另一个元素的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35878461/