2

我已经搜索过，有些人问过这个问题，但没有人给出足够的答案，而且大多数提问者没有提供有用的示例代码。我将它缩减为我正在尝试做但不起作用的事情。手风琴有效，但单选按钮无效。有什么办法可以使这项工作？

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

1 回答 1

3

这是一个选项：

$('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 小提琴演示。

于 2013-03-30T00:23:34.667 回答