jquery - 复选框更新后“href”属性未正确更新

Question

我使用最新版本的 jQueryMobile (1.3.2)。

我有一个带有标签的复选框，其中包含一个标题和两个段落。我希望能够单击标题并根据复选框的状态显示一个弹出窗口：
如果选中该复选框，则弹出窗口 1 将显示在屏幕上。
相反，如果未选中复选框，则显示弹出窗口 2。

所以弹出窗口的链接取决于复选框的状态。

这是我的代码：

<div data-role="popup" id="popupMenu1">
    <ul data-role="listview">
        <li><a href="#">Edit</a></li>
        <li><a href="#">Activate</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
</div>
<div data-role="popup" id="popupMenu2">
    <ul data-role="listview">
        <li><a href="#">Edit</a></li>
        <li><a href="#">Desactivate</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
</div>

<ul id="listOfObjects" data-role="listview" data-inset="true">
 <li>
  <fieldset data-role="controlgroup">
   <a id="link1" href="#popupMenu1" data-rel="popup"> Object 1</a> 
  </fieldset>
  <input type="checkbox" name="checkbox1" id="checkbox1" class="custom"/>  
 </li>

 <li>
  <fieldset data-role="controlgroup">        
   <a id="link2" href="#popupMenu1" data-rel="popup">Object 2</a>
  </fieldset>  
  <input type="checkbox" name="checkbox2" id="checkbox2" class="custom"/> 
 </li>
</ul>

<script>
 function myFunction1()
 {
  if ($('#checkbox1').is(':checked')) 
   $("#link1").attr("href", "#popup2"); 
  else 
  $("#link1").attr("href", "#popup1");         
 }

 function myFunction2()
 {
  if ($('#checkbox2').is(':checked')) 
   $("#link2").attr("href", "#popup2"); 
  else 
   $("#link2").attr("href", "#popup1");       
 }
</script>

然而，有了这个表达式：

<a id="link1" href="#popupMenu1" data-rel="popup">Object 1</a>

或者
<a id="link2" href="#popupMenu1" data-rel="popup">Object 2</a>

无论复选框的状态如何，显示的弹出窗口始终是 popup1。
那么如何设置正确的链接呢？

Answer 1

你的 id应该是<a>id 。#link1link1

Answer 2

尝试这个

 function myFunction()
{
    if ($('#checkbox2').is(':checked')) 
        $("#link1").attr("href", "#popup2"); 
    else 
        $("#link1").attr("href", "#popup1");     
}

Answer 3

试试这个：

小提琴演示

我已经更新了你的代码，稍微改变你的 javascript 函数：

希望这可以帮助。

让我知道！

HTML：

<a id="link1" href="#">Object1</a>

<input type="checkbox" value="you selected the checkbox" id="checkbox2">check me if you like</input>

Javascript：

var test = '';
$('#link1').click(function () {    
    test = $('input:checked').length ? $('input:checked').val() : '';
    alert(test);
});