0

私が jQuery でやろうとしているのは、同じグループ内の 3 つのラジオ ボタンを互いに使用できるようにすることです。1 つを選択すると、他の 2 つがアクティブになることはありません。jQuery を使用して最終結果に HTML の個別のブロックを表示できるようにしたいのですが、作業しているもので簡単に実行できるものを取得できません。

現時点で作業する必要があるコードは次のとおりです。

    $(document.ready(function()
{
    $("input[name='rdiobut']").change(function(){
        if ($("input['rdiobut']:checked".val() == 'a'))
        $("#rdiocont").text("There is no expiration date.");
        else if ($("input[name='rdiobut']:checked".val() == 'b'))
        $("#rdiocont").text("Tell me how many days until expire");
        else ($("input[name='rdiobut']:checked".val() == 'c'))
        $("#rdiocont").text("Pick the date to expire from a calendar");
    });
});

jQuery が移動するテーブルは次のとおりです。

<tr><td>Expire Settings:</td><td>Does Not Expire: <input type="radio" name="rdiobut" value="a" checked="check" /> &nbsp;&nbsp;&nbsp;<strong>OR</strong> Expires By Days <input type="radio" name="rdiobut" value="b" /> &nbsp;&nbsp;&nbsp;<strong>OR</strong> Select a Date to Expire On <input type="radio" name="rdiobut" value="c" /></td></tr><tr id="rdiocont"><td>No Expiration Date</td></tr><tr id="rdiocont"><td>Expires by Days</td></tr><tr id="rdiocont"><td>Choose Expiration by Calendar</td></tr>

私が間違っているかもしれないことについて誰かアドバイスや考えがありますか?

4

2 に答える 2

1

わかりました、コードにエラーがありました。これで、すべてがクリーンアップされ、私が望むように動作します(動作例):

jQuery

$(document).ready(function()
{
    $("input[name='rdiobut']").change(function(){
        if ($("input[name='rdiobut']:checked").val() == 'a')
            $("#rdiocont").text("There is no expiration date.");
        else if ($("input[name='rdiobut']:checked").val() == 'b')
            $("#rdiocont").text("Tell me how many days until expire");
        else if ($("input[name='rdiobut']:checked").val() == 'c')
            $("#rdiocont").text("Pick the date to expire from a calendar");
    });
});

HTML

<table>
    <tr>
        <td>Expire Settings:</td>

        <td>
            Does Not Expire: 
            <input type="radio" name="rdiobut" value="a" checked="checked" /> &nbsp;&nbsp;&nbsp;
            <strong>OR</strong> 
            Expires By Days 
            <input type="radio" name="rdiobut" value="b" /> &nbsp;&nbsp;&nbsp;
            <strong>OR</strong> 
            Select a Date to Expire On 
            <input type="radio" name="rdiobut" value="c" />
        </td>
    </tr>

    <tr id="rdiocont">
        <td>(Select an option)</td>
    </tr>

</table>

いくつかのメモ:

  • さまざまな要素に同じ id を使用しないでください ( で使用したように<tr id="rdiocont">)。
  • あり$(document).readyません$(document.ready- 閉店 に 注意 です .)
  • @Ryan が言ったように、else ステートメントで式を評価しないでください。本当に式を評価したい場合は、引き続き使用してelse ifください (else ステートメントは必須ではありません)。
  • あなたの最初の評価では、そうでinput[name='rdiobut']はありませんinput['rdiobut']。)あなたもアフターを閉じませんでした:checked"
于 2012-12-14T22:31:57.970 に答える
0

まず、最後の else ステートメントです。式を if ステートメントであるかのように評価しようとしています。

2 つ目は、ラジオ ボタンが同じ名前である限り、これがデフォルトの動作です。

于 2012-12-14T21:36:40.477 に答える