1

同時に機能する2セットのラジオボタンを設定しようとしています。つまり、上部の男性をチェックするたびに、下部の男性を自動的にチェックしてほしいのです。（およびその逆）ユーザーが下にスクロールして女性をクリックした場合は、上部にあるものをチェックする必要があります。ユーザーがどちらの無線をクリックしても、両方の無線セットで常に同じ値をチェックする必要があります。これを達成するための最も実用的な方法についてアドバイスしてください。私の主な焦点はJavascriptまたはJqueryですが、役に立たないものを考え出すために数時間を費やしました。お知らせ下さい。ありがとう！:)

<div class="top">
<input type="radio" name="sex" value="Male" /> Male<br />
<input type="radio" name="sex" value="Female" checked="checked" /> Female<br />
</div>

<div>Random Content</div>

<div class="bottom">
<input type="radio" name="sex2" value="Male" /> Male<br />
<input type="radio" name="sex2" value="Female" checked="checked" /> Female<br />
</div>
4

5 に答える 5

4

イベントに添付し、の先頭が同じで同じであるが現在のものではないchange他のすべてのラジオボタンを選択します。namevalue

$("input[name^='sex']").change(function(){
    var $otherRadioButtons = $("input[name^='sex'][value='" + this.value + "']").not(this);
    $otherRadioButtons.prop('checked', $(this).prop('checked'));
});

上記は、自分で追加できるセレクターの巧妙なキャッシュを使用していません。

基本的に、ラジオボタンがチェックされた値を変更するたびに、コードは同じ（男性/女性）で始まり、同じ（性別????）で始まる他のすべてのラジオボタンを選択し、チェックされたプロパティを現在のもの。 valuename

これが理にかなっていることを願っています。以下の実用的なデモをご覧ください。

デモ-セット内のラジオボタンを変更します。

編集

私はちょうど気づきました..私はjquery1.3.2を使用していますが、現時点ではアップグレードはオプションではありません。あなたはたまたま1.3.2の選択肢を持っていませんか？

jQueryバージョン1.3.2の場合、attrメソッドの代わりにメソッドを使用しますprop。

$("input[name^='sex']").change(function(){
    var $otherRadioButtons = $("input[name^='sex'][value='" + this.value + "']").not(this);
    $otherRadioButtons.attr('checked', $(this).attr('checked'));
});

デモ-jQuery1.3.2を使用してセット内のラジオボタンを変更します。

于 2012-08-28T21:04:17.877 に答える
1

両方のセットにonclickリスナーを追加するだけです。このような：

document.getElementById("male1").onclick=clickMale;
document.getElementById("male2").onclick=clickMale;
document.getElementById("female1").onclick=clickFemale;
document.getElementById("female2").onclick=clickFemale;

function clickMale(){
  document.getElementById("male1").checked=true;
  document.getElementById("male2").checked=true;
}
function clickFemale(){
  document.getElementById("female1").checked=true;
  document.getElementById("female2").checked=true;
}

そして、ラジオボタンにIDを追加します（ "male1"、 "male2"、 "female1"、 "female2"）

于 2012-08-28T20:54:28.963 に答える
0

あなたがそれについて言及したので、あなたが望むなら、jQueryでのZoveの答えは次のようになります：

$("#male1").click(clickMale);
$("#male2").click(clickMale);
$("#female1").click(clickFemale);
$("#female2").click(clickFemale);

function clickMale(){
    $("#male1").attr('checked', true);
    $("#male1").attr('checked', true);
}

function clickFemale(){
    $("#female1").attr('checked', true);
    $("#female2").attr('checked', true);
}

これほど単純なものにはjQueryは必要ありませんが、他の場所で使用している場合は、一貫性を保つことが最善です。

于 2012-08-28T21:03:57.293 に答える
0

男性/女性の両方の入力のクラスを共有することは理にかなっているかもしれません（例：'js-male'または'js-female'）。これにより、コードが節約されます。たとえば、次のことができます。

   $('.js-male').change(function() {
      $('.js-male').attr('checked', $(this).attr('checked'));
   });

   $('.js-female').change(function() {
     $('.js-female').attr('checked', $(this).attr('checked'));
   });

状況全体に対処するためのよりエレガントな方法があるかもしれません。入力に異なる名前（'male'、'male2'）を付けたいですか？つまり、サーバーは2つの異なるパラメーターを受け取りますか？両方のラジオボタングループに同じ名前を付けると、最後の1つの値だけがサーバーに送信されます。とにかく、ラジオボタンをミラーリングする場合、これは実際には問題ではありません。

デモ

于 2012-08-28T21:05:42.110 に答える
0

jQueryソースの場所を変更するだけで、すぐに使用できます。

<html>
<head>
    <script src="jquery-1.7.1.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#male1, #male2").live("click", function(){
                $("#male1").attr("checked", $("#male2").attr("checked"));
                $("#male2").attr("checked", $("#male1").attr("checked"));
            });

            $("#female1, #female2").live("click", function(){
                $("#female1").attr("checked", $("#female2").attr("checked"));
                $("#female2").attr("checked", $("#female1").attr("checked"));
            });
        });
    </script>

</head>
<body>
    <div class="top">
        <input id="male1" type="radio" name="sex" value="Male" /> Male<br />
        <input id="female1" type="radio" name="sex" value="Female" checked="checked" /> Female<br />
    </div>

    <div>Random Content</div>

    <div class="bottom">
        <input id="male2" type="radio" name="sex2" value="Male" /> Male<br />
        <input id="female2" type="radio" name="sex2" value="Female" checked="checked" /> Female<br />
    </div>
</body>

</html>
于 2012-08-28T21:25:43.660 に答える