6

xtcommerceベースの回避策で多くのラジオボタンを使用しています。これらのラジオボタンは動的に作成され、次のようにグループごとに異なる名前が付けられます。

<input type="radio" name="id[1]" value="40">
<input type="radio" name="id[1]" value="30">
<input type="radio" name="id[1]" value="20">
<input type="radio" name="id[1]" value="10">
<input type="radio" name="id[2]" value="40">
<input type="radio" name="id[2]" value="30">
<input type="radio" name="id[2]" value="20">
<input type="radio" name="id[2]" value="10">
<input type="radio" name="id[3]" value="10">
....

次に、これらのラジオボタンを「グループ化」して、一度に1つのラジオボタンしか選択できないようにします。これで、デフォルトで、各「グループ」のすべての最初のラジオボタン（name = "id [1]"、name = "id [2]"など）が事前に選択され、各ラジオボタンのすべての値が送信されます。

私はこのスクリプトをstackoverflowで見つけ、1つのラジオボタンのみを選択しました。

$(document).ready(function () {
  $('input[type=radio]').prop('checked', false);
  $('input[type=radio]:first').prop('checked', true)

  $('input[type=radio]').click(function (event) {
    $('input[type=radio]').prop('checked', false);
    $(this).prop('checked', true);

    event.preventDefault();
  });
});

これがそのフィドルです：

http://jsfiddle.net/3xD7V/1/

これは今のところ機能します。ページで選択できるラジオボタンは1つだけです。しかし、私のjs-fiddleにも見られるように、1つの問題があります。

http://jsfiddle.net/ksZxV/

最初のグループの最初のラジオボタンは事前に選択されています-それで問題ありません。ただし、同じグループの別のラジオボタンを選択した場合、選択-「マーク」は変更されません。別のグループのラジオボタンをクリックした場合にのみ、選択したラジオボタンが選択されます（FF （編集：およびOperaとIE9）で別のバグが見つかりました）、他のラジオボタンを選択した場合、選択マークは表示されません; Chromeでは、別のグループを選択すると変更されます）。この同じグループにとどまる場合、選択も変更されません。

ローカルベースのインストールでは、動的に変化するアップデーターがあり、選択したアイテムの新しい価格が示されます（申し訳ありませんが、これをフィドルに実装できませんでした）。これはこれまでのところ機能し、同じグループの別のラジオボタンを選択しても価格は更新されますが、選択の前に説明したように、「マーク」は変更されません...

この問題のアイデアはありますか？

4

4 に答える 4

17

すべてのラジオボタンのチェックを外してから、現在のラジオボタンを再チェックする必要はありません。以前にチェックしたボタンのチェックを外すだけで十分です。

この単純化の副作用として、バグも修正されます。

$(document).ready(function () {
    $('input[type=radio]').change(function() {
        // When any radio button on the page is selected,
        // then deselect all other radio buttons.
        $('input[type=radio]:checked').not(this).prop('checked', false);
    });
});​
于 2012-12-12T12:53:06.253 に答える
1

event.preventDefault();クリック関数内のコードがそれを行っているので、なぜそこにあるのですか。

を削除しevent.preventDefault();て試してください

これがフィドルです。

http://jsfiddle.net/ksZxV/1/

于 2012-12-12T12:45:37.457 に答える
1

削除するだけevent.preventDefault();で動作します。

このJSFIDDLEを確認してください

于 2012-12-12T12:46:41.030 に答える
1

名前は異なるが選択が1つだけのラジオボタン

実例：https ：//codepen.io/Vivekparashar/pen/wvwLwxY

JS：

$(document).ready(function() {
  $("input[type=radio]").prop("checked", false);
  $("input[type=radio]:first").prop("checked", true);

  $("input[type=radio]").click(function(event) {
    $("input[type=radio]").prop("checked", false);
    $(this).prop("checked", true);

    //event.preventDefault();
  });
});

HTML：

<div class="mycontainer">   
    <h3 class="heading">Radio Button With Different Name/Group but Single Selection</h3>
    <hr>
    <form>
        <div class="radioDiv">
            <label class="11">Radio Button 1</label>
            <input type="radio" name="radiobutton1">
        </div>
        <div class="radioDiv">
            <label>Radio Button 2</label>
            <input type="radio" name="radiobutton2">
        </div>
        <div class="radioDiv">
            <label>Radio Button 3</label>
            <input type="radio" name="radiobutton3">
        </div>
        <div class="radioDiv">
            <label>Radio Button 4</label>
            <input type="radio" name="radiobutton4">
        </div>
        <div class="radioDiv">
            <label>Radio Button 5</label>
            <input type="radio" name="radiobutton5">
        </div>
    </form>
</div>
于 2019-12-26T13:56:12.033 に答える