使用jquery檢查另一個元素的單選按鈕

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沒有關閉。

嘗試在此添加IDS的HREF：

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

而且它很好地利用了preventDefault（）的函數調用A 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的新版本，使用。對（ '點擊'，（）的函數代替。點擊（函數（）

;）

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