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

时间:2016-03-08 21:33:39

标签: jquery html

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

3 个答案:

答案 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);
   });
 });