0

私は次のHTMLを使用しています。

<div class="form">
    <input type="radio" name="type" value="100" checked="checked" />100
    <input type="radio" name="type" value="200" />200
    <input type="radio" name="type" value="300" />300
    <input type="radio" name="type" value="other" />other
</div>


<input type="radio" name="img" value="100"/> img1
<input type="radio" name="img" value="200"/> img2
<input type="radio" name="img" value="100"/> img3
<input type="radio" name="img" value="200"/> img4
<input type="radio" name="img" value="300"/> img5
<input type="radio" name="img" value="100"/> img6
<input type="radio" name="img" value="200"/> img7
<input type="radio" name="img" value="300"/> img8
<input type="radio" name="img" value="200"/> img9
<input type="radio" name="img" value="100"/> img10

私が達成しようとしているのは、jQueryが上部のラジオボタンの値と一致する下部のラジオボタンを表示または非表示にすることです。つまり、ユーザーが上部のラジオボタンをクリックすると、ユーザーがチェックしたボタンの値に基づいてリストが表示されます。私は多くの同様の答えを見つけましたが、すべてがクラスまたはのいずれかに基づいていましたdiv。一致する値については何も言われていません。だから私はこれを投稿しなければなりませんでした。

このコードでフィドルも作成しました。

4

1 に答える 1

1

以下のように行うことができますが、各ラジオ ボタンのテキストは、ラジオimg1, img2, etcボタンと一緒に選択できる要素内にないため、非表示にならないことに注意してください。

var imageRadioButtons = $('[name="img"]');

$('[name="type"]').click(function(){
    var selectedValue = this.value;
    imageRadioButtons.show();

    imageRadioButtons.filter(function(){
        return this.value === selectedValue;
    }).hide();
})

デモ 1 - 一致するラジオ ボタンを非表示にする

編集

それらが非表示になる場合、それぞれが1つのdiv id要素内にある必要がありますか? またはdivクラス要素？

たとえば、次のようにスパンにラップできます。

<div class="form">
    <input type="radio" name="type" value="100" checked="checked" />100
    <input type="radio" name="type" value="200" />200
    <input type="radio" name="type" value="300" />300
    <input type="radio" name="type" value="other" />other
</div>


<input type="radio" name="img" value="100"/> <span>img1</span>
<input type="radio" name="img" value="200"/> <span>img2</span>
<input type="radio" name="img" value="100"/> <span>img3</span>
<input type="radio" name="img" value="200"/> <span>img4</span>
<input type="radio" name="img" value="300"/> <span>img5</span>
<input type="radio" name="img" value="100"/> <span>img6</span>
<input type="radio" name="img" value="200"/> <span>img7</span>
<input type="radio" name="img" value="300"/> <span>img8</span>
<input type="radio" name="img" value="200"/> <span>img9</span>
<input type="radio" name="img" value="100"/> <span>img10</span>

次に、次のように、現在の入力に続く次の span 要素を常に非表示にするようにスクリプトを調整できます。

imageRadioButtons.filter(function(){
    return this.value === selectedValue;
}).hide().next('span').hide();

デモ 2 - 一致するラジオ ボタンとテキストを非表示にする

さらに、DEMO 2 のスクリプトを更新して、最初に読み込まれたときに対応するボタンも非表示にしました。そこから必要なものを調整できます。

DEMO 2 の完全なスクリプト:

var typeRadioButtons = $('[name="type"]');
var imageRadioButtons = $('[name="img"]');

var hideSelected = function(selectedValue){
    imageRadioButtons.filter(function(){
        return this.value === selectedValue;
    }).hide().next('span').hide();
};

var initValue = typeRadioButtons.filter(function(){
    return this.checked;
})[0].value;

hideSelected(initValue);

typeRadioButtons.click(function(){
    var selectedValue = this.value;
    imageRadioButtons.show().next('span').show();

    hideSelected(selectedValue);
});
于 2013-02-11T14:49:51.770 に答える