Question

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

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>

Answer 2

选择器错误，你的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（）

）

Answer 3

以下是工作示例。

您只需要使用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);
   });
 });

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

3 个答案: