如何使单选按钮在JQuery UI手风琴内工作？

问题描述：

我已经搜索过，有些人问过这个问题，但是没有人给出足够的答案，大多数问答者没有提供有用的示例代码。我把它简化为我正在尝试做的事情，但哪一个都行不通。手风琴的作品，但单选按钮没有。有什么办法可以做到这一点？如何使单选按钮在JQuery UI手风琴内工作？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" /> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script> 
    <title>Test</title> 
    <script type="text/javascript"> 
     $(document).ready(
     function() 
     { 
      $('#mystuff').accordion(
      { 
       header: "div.hdr", 
       collapsible: true, 
       heightStyle: "content" 
      }); 
     } 
    ); 
    </script> 
    </head> 
    <body> 
    <form> 
     <div id="mystuff"> 
     <div class="hdr"> 
      <span><input type="radio" name="r1" value="A" checked="checked" /></span> 
      <span>Choose A</span> 
      <span><input type="radio" name="r1" value="B" /></span> 
      <span>Choose B</span> 
     </div> 
     <div> 
      This is the body for 1. 
     </div> 
     <div class="hdr"> 
      <span><input type="radio" name="r2" value="A" checked="checked" /></span> 
      <span>Choose A</span> 
      <span><input type="radio" name="r2" value="B" /></span> 
      <span>Choose B</span> 
     </div> 
     <div> 
      This is the body for 2. 
     </div> 
     </div> 
    </form> 
    </body> 
</html>

编辑：大卫托马斯的建议工作。下面是修改后的例子，固定：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" /> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script> 
    <title>Test</title> 
    <script type="text/javascript"> 
     $(document).ready(
     function() 
     { 
      $('#mystuff').accordion(
      { 
       header: "div.hdr", 
       collapsible: true, 
       heightStyle: "content" 
      }); 
      $('input[type=radio],label').on('click',function(e){e.stopPropagation();}); 
     } 
    ); 
    </script> 
    </head> 
    <body> 
    <form> 
     <div id="mystuff"> 
     <div class="hdr"> 
      <span><input id="r1a" type="radio" name="r1" value="A" checked="checked" /></span><label for="r1a">Choose A</label> 
      <span><input id="r1b" type="radio" name="r1" value="B" /></span><label for="r1b">Choose B</label> 
     </div> 
     <div> 
      This is the body for 1. 
     </div> 
     <div class="hdr"> 
      <span><input id="r2a" type="radio" name="r2" value="A" checked="checked" /></span><label for="r2a">Choose A</label> 
      <span><input id="r2b" type="radio" name="r2" value="B" /></span><label for="r2b">Choose B</label> 
     </div> 
     <div> 
      This is the body for 2. 
     </div> 
     </div> 
    </form> 
    </body> 
</html>

我忘了提及：在我最初尝试这样做的代码中，我有一个onclick事件处理程序用于输入。我在Firebug的那个投手中放了一个断点，当它停下时，另一个电台被点击并通过我的事件处理程序停留。我走出了它，jquery.js中的东西切换回来，但我不明白它是什么。我认为Firebug在jquery的事件悬念中感到困惑。我知道我是。 – billdsd

如果您忘记了某些内容，请修改您的帖子并添加它，您可以在帖子底部看到编辑选项 –

答

这里有一个选项：

$('div.hdr span').click(function(e){ 
    // stops the click event bubbling/propagating beyond the span 
    e.stopPropagation(); 
    // finds the previous span, 
    // finds the radio input in that span (if there is one) 
    // and checks it (though you should use the label element for this, really 
    $(this).prev('span').find('input:radio').prop('checked', true); 
});

JS Fiddle demo。

工作正常！我将原始示例代码的工作版本添加到了初始文章中，以便稍后阅读此问题的人员可以更轻松地看到如何使其工作。我会投你的答案，但显然，我不允许这样做。 – billdsd

如何使单选按钮在JQuery UI手风琴内工作？

相关推荐