Question

我搜索过，有些人问过这个问题，但是没有人给出足够的答案，而且大多数人都没有提供有用的示例代码。我把它减少到了我想要做的事情，但哪些不起作用。手风琴有效但单选按钮没有。有没有办法让这项工作？

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

Answer 1

这是一个选项：

$('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

如何在JQuery UI手风琴中制作单选按钮？

1 个答案: