jquery - 使用 jquery 检查来自另一个元素的单选按钮

Question

是否可以通过单击不相关的 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>

Answer 1

前提是可行的，但是您有一些语法错误。您的列表缺少关闭 </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>