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>

編集: David Thomas の提案が機能しました。修正された修正例は次のとおりです。

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

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 フィドルのデモ。

于 2013-03-30T00:23:34.667 に答える