0

ラジオボタンの2つのグループを使用しています

グループ 1:

  • 州
  • 街

グループ 2:

  • 交流
  • DH
  • わたしは
  • NR
  • SZ

州と都市を切り替えるとき、グループ 2 の AC をオンに設定し、その他はオフに設定します。

私はそれがこのフィドルで働いています

HTML:

<div id="sort-radio">
    <input type="radio" id="byState" name="sort-radio" checked="checked"/><label for="byState">By State</label>
    <input type="radio" id="byCity" name="sort-radio"/><label for="byCity">By City</label>
</div>

<div id="alphabet-radio" style="width:300px;">
<input type="radio" id="A-C" name="alphabet-radio" checked="checked"/>
    <label for="A-C">A-C</label>
<input type="radio" id="D-H" name="alphabet-radio"/>
    <label for="D-H">D-H</label>
<input type="radio" id="I-M" name="alphabet-radio"/>
    <label for="I-M">I-M</label>
<input type="radio" id="N-R" name="alphabet-radio"/>
    <label for="N-R">N-R</label>
<input type="radio" id="S-Z" name="alphabet-radio"/>
    <label for="S-Z">S-Z</label>
</div>

JavaScript:

$(function () {
    $("#sort-radio").buttonset();
});

$(function () {
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});

document.getElementById("byState").addEventListener("click", function () {
    document.getElementById("A-C").checked = true;
    document.getElementById("D-H").checked = false;
    document.getElementById("I-M").checked = false;
    document.getElementById("N-R").checked = false;
    document.getElementById("S-Z").checked = false;
}, false);

document.getElementById("byCity").addEventListener("click", function () {
    document.getElementById("A-C").checked = true;
    document.getElementById("D-H").checked = false;
    document.getElementById("I-M").checked = false;
    document.getElementById("N-R").checked = false;
    document.getElementById("S-Z").checked = false;
}, false);

ただし、この正確なコードを自分の Web サイトで使用すると、機能しません (グループ 2 から以前に選択したボタンが選択されたままになります)。ここにあるように、ラジオボタンをうまく表示する jquery-ui-1.10.1.custom.css を使用しています: jquery ui button。

これが影響する理由は何ですか？index.php からこの行を削除すると、<link rel="stylesheet" href="jquery-ui-1.10.1.custom.css" />うまく機能します。

4

2 に答える 2

2

いくつかの問題:

  1. ウィジェットはbutton、ラジオ ボタンのラベルのクリック イベントに応答することで機能します。これは、click実際にはラジオ ボタン自体をクリックしているのではなく、そのラジオ ボタンをクリックしているため、ラジオ ボタン自体でリッスンしているイベントが発生しないことを意味しますlabel。changeこの問題は、イベントを使用して回避できます。

  2. .buttonset('refresh')ラジオボタンのチェック状態を手動で更新した後に呼び出す必要があります。

  3. グループ内の 1 つのラジオ ボタンに属性を設定するcheckedだけで、残りのラジオ ボタンが自動的にオフになります。checkedそれぞれにプロパティを設定する必要はありません。

  4. イベント ハンドラーdocument.readyもハンドラー内に配置する必要があります。2 つではなく 1 つだけを使用することもできます。

これらすべてを念頭に置いて、私が行う変更は次のとおりです。

$(function () {
    $("#sort-radio").buttonset();
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');

    document.getElementById("byState").addEventListener("change", function () {
        document.getElementById("A-C").checked = true;
        $("#alphabet-radio").buttonset("refresh");
    }, false);

    document.getElementById("byCity").addEventListener("change", function () {
        document.getElementById("A-C").checked = true;
        $("#alphabet-radio").buttonset("refresh");
    }, false);
});

例: http://jsfiddle.net/Fzq8L/2/

于 2013-03-12T23:05:49.327 に答える
0

jQueryを使用しているので、ラジオボタンにクラスを追加することでこれを大幅に簡素化できます。ラジオボタンの1つだけを「設定」できるので、それらの変更イベントをリッスンします。最初に余分な機能を削除し、2番目のグループからクリックするボタンの「配列」の1つを選択します。（1つしか選べないので）

より単純なバージョンのマークアップ：

<div id="sort-radio">
    <input type="radio" class="picker" id="byState" name="sort-radio" checked='true'
    />
    <label for="byState">By State</label>
    <input type="radio" class="picker" id="byCity" name="sort-radio"
    />
    <label for="byCity">By City</label>
</div>
<div id="alphabet-radio" style="width:300px;">
    <input type="radio" class="secondgroup" id="A-C" name="alphabet-radio"
    checked='true' />
    <label for="A-C">A-C</label>
    <input type="radio" class="secondgroup" id="D-H" name="alphabet-radio"
    />
    <label for="D-H">D-H</label>
    <input type="radio" class="secondgroup" id="I-M" name="alphabet-radio"
    />
    <label for="I-M">I-M</label>
    <input type="radio" class="secondgroup" id="N-R" name="alphabet-radio"
    />
    <label for="N-R">N-R</label>
    <input type="radio" class="secondgroup" id="S-Z" name="alphabet-radio"
    />
    <label for="S-Z">S-Z</label>
</div>

コード：

$(document).ready(function () {
    $("#sort-radio").buttonset();
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
    $('.secondgroup').eq($('.picker').index(this)).prop("checked", true);
    $('#alphabet-radio').buttonset('refresh');
});

実例： http： //jsfiddle.net/MarkSchultheiss/8x28x/2/

最初のグループのいずれかが変更されたときに、最初に2番目のグループをアイテムに戻します。

$(document).ready(function () {
    $("#sort-radio").buttonset();
    $("#alphabet-radio").buttonset().find('label').css('width', '19.4%');
});
$(".picker").change(function () {
    $('.secondgroup').eq(0).prop("checked", true);
    $("#alphabet-radio").buttonset("refresh");
});

そのためのフィドル：http： //jsfiddle.net/MarkSchultheiss/8x28x/3/

于 2013-03-12T23:37:53.180 に答える