复选框更新后“href”属性未正确更新答案

【问题标题】："href" attribute not updated correctly after a checkbox update复选框更新后“href”属性未正确更新
【发布时间】：2013-08-12 08:05:43
【问题描述】：

我使用的是最新版本的 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。
那么如何设置正确的链接呢？

【问题讨论】：

删除 id 'Object1' 上的哈希
我尝试不使用“哈希”，但它不起作用。显示的弹窗还是一样的。

标签： jquery jquery-ui jquery-mobile

【解决方案1】：

试试这个

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

【讨论】：

我用你的代替了我的功能。我还将“#link1”替换为“link1”（不带哈希），但无论复选框的状态如何，显示的弹出窗口始终是 href 中提到的弹出窗口。

【解决方案2】：

<a> 上的 ID 为 #link1，它应该只是 link1。

【讨论】：

【解决方案3】：

试试这个：

FIDDLE DEMO

我已经更新了你的代码，稍微改变你的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);
});

【讨论】：

我将“#link1”替换为“link1”，但无论复选框的状态如何，显示的弹出窗口始终相同。
我看过你的小提琴演示，我正在努力让你的功能适应我的代码。
在你的函数中，如果我用popupMenu1替换''，显示的消息是“[objectHTMLDivElement]”。