是否可以通过单击不相关的html元素来检查单选按钮,即。按钮,列表项还是锚?
我对jquery相当新,我不确定我是否选择了正确的apporach
这是我的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>
答案 0 :(得分:0)
前提是有效的,但是您有一些语法错误。您的列表缺少关闭</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>
答案 1 :(得分:0)
选择器错误,你的ul没有关闭。
尝试在此hrefs上添加ID:
<ul>
<li>
<a href="#" id="p1">
</a>
</li>
<li>
<a href="#" id="p2">
</a>
</li>
<li>
<a href="#" id="p3">
</a>
</li>
</ul>
并且在函数上使用preventDefault()是很好的,它调用一个href来不改变url
<script>
$(document).ready(function () {
$("#p1").click(function (e) {
e.preventDefault();
$('input:radio[name=Package1]').prop('checked', true);
$('input:radio[name=Package2]').prop('checked', false);
$('input:radio[name=Package3]').prop('checked', false);
});
$("#p2").click(function (e) {
e.preventDefault();
$('input:radio[name=Package2]').prop('checked', true);
$('input:radio[name=Package1]').prop('checked', false);
$('input:radio[name=Package3]').prop('checked', false);
});
$("#p3").click(function (e) {
e.preventDefault();
$('input:radio[name=Package3]').prop('checked', true);
$('input:radio[name=Package1]').prop('checked', false);
$('input:radio[name=Package2]').prop('checked', false);
});
});
</script>
如果您使用的是较新版本的Jquery,请使用.on('click',function()代替.click(function()
)
答案 2 :(得分:0)
以下是工作示例。
您只需要使用ID或Class正确引用元素。
<ul>
<li>
<a id="p1" href="#p1">Click me</a>
</li>
<li>
<button id="p2">Click Me
</button>
</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>
</ul>
$(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);
});
});