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

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

jquery html

使用jquery检查另一个元素中的单选按钮,jquery,html,Jquery,Html,是否可以通过单击无关的html元素（例如按钮、列表项或锚定）来检查单选按钮我对jquery相当陌生，不确定我是否采用了正确的方法这是我的HTML <ul> <li> <a href="#p1"> </a> </li> <li> <a href="#p2"> </a> </li> <li> <a href="#p3">

是否可以通过单击无关的html元素（例如按钮、列表项或锚定）来检查单选按钮

我对jquery相当陌生，不确定我是否采用了正确的方法

这是我的HTML

<ul>
<li>
    <a href="#p1">
    </a>
</li>
<li>
    <a href="#p2">
    </a>
</li>
<li>
    <a href="#p3">
    </a>
</li>



包1


方案2


方案3

和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>


$（文档）.ready（函数（）{
$（“#p1”）。单击（函数（）{
$（'input:radio[name=Package1]'）。prop（'checked'，true）；
$（'input:radio[name=Package2]'）。prop（'checked'，false）；
$（'input:radio[name=Package3]'）。prop（'checked'，false）；
});
$（“#p2”）。单击（函数（）{
$（'input:radio[name=Package2]'）。prop（'checked'，true）；
$（'input:radio[name=Package1]'）。prop（'checked'，false）；
$（'input:radio[name=Package3]'）。prop（'checked'，false）；
});
$（“#p3”）。单击（函数（）{
$（'input:radio[name=Package3]'）。prop（'checked'，true）；
$（'input:radio[name=Package1]'）。prop（'checked'，false）；
$（'input:radio[name=Package2]'）。prop（'checked'，false）；
});
});

前提是可行的，但是您有一些语法错误。您的列表缺少结束元素，您正在按不存在的ID进行选择。下面是一个工作示例：

$（“#p1”）。单击（函数（）{
$（'input:radio[name=Package1]'）。prop（'checked'，true）；
$（'input:radio[name=Package2]'）。prop（'checked'，false）；
$（'input:radio[name=Package3]'）。prop（'checked'，false）；
});
$（“#p2”）。单击（函数（）{
$（'input:radio[name=Package2]'）。prop（'checked'，true）；
$（'input:radio[name=Package1]'）。prop（'checked'，false）；
$（'input:radio[name=Package3]'）。prop（'checked'，false）；
});
$（“#p3”）。单击（函数（）{
$（'input:radio[name=Package3]'）。prop（'checked'，true）；
$（'input:radio[name=Package1]'）。prop（'checked'，false）；
$（'input:radio[name=Package2]'）。prop（'checked'，false）；
});











包1


方案2


方案3

选择器错误，并且您的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>










在调用a href以不更改url的函数上使用preventDefault（）也很好
 <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>


$（文档）.ready（函数（）{
$（“#p1”）。单击（功能（e）{
e、 预防默认值（）；
$（'input:radio[name=Package1]'）。prop（'checked'，true）；
$（'input:radio[name=Package2]'）。prop（'checked'，false）；
$（'input:radio[name=Package3]'）。prop（'checked'，false）；
});
$（“#p2”）。单击（函数（e）{
e、 预防默认值（）；
$（'input:radio[name=Package2]'）。prop（'checked'，true）；
$（'input:radio[name=Package1]'）。prop（'checked'，false）；
$（'input:radio[name=Package3]'）。prop（'checked'，false）；
});
$（“#p3”）。单击（功能（e）{
e、 预防默认值（）；
$（'input:radio[name=Package3]'）。prop（'checked'，true）；
$（'input:radio[name=Package1]'）。prop（'checked'，false）；
$（'input:radio[name=Package2]'）。prop（'checked'，false）；
});
});

如果您使用的是较新版本的Jquery，请使用.on（'click'，function（）。click（function（））
）
下面是一个工作示例
您只需要使用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);
   });
 });





点击我




包1


方案2


$（文档）.ready（函数（）{
$（“#p1”）。单击（函数（）{
$（'input:radio[name=Package1]'）。prop（'checked'，true）；
$（'input:radio[name=Package2]'）。prop（'checked'，false）；
$（'input:radio[name=Package3]'）。prop（'checked'，false）；
});
$（“#p2”）。单击（函数（）{
$（'input:radio[name=Package2]'）。prop（'checked'，true）；
$（'input:radio[name=Package1]'）。prop（'checked'，false）；
$（'input:radio[name=Package3]'）。prop（'checked'，false）；
});
});
首先：使用$（选择器）。在（eventType，func）上，这是一种更新更好的事件绑定方法。嗯……是的，我认为这可能会奏效……你至少在问这个问题之前试过了吗^^？你使用的是id选择器
，而你没有具有该id的元素。你应该使用$（[href=#p1]）。单击…
>（“a”）[href=#p2]）。单击…
和$（[href=#p3]）。单击…
    <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);
   });
 });