0

ここに私のラジオボタンがあります：

<div style="float: left; margin-top: 35px; margin-left: 38px;">
    <input type="radio" name="cat" class="styled" value="jersey" />
</div>
<div style="float: left; margin-left: 58px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="shorts" />
</div>
<div style="float: left; margin-left: 58px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="shirts" />
</div>
<div style="float: left; margin-left: 58px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="reversible" />
</div>
<div style="float: left; margin-left: 88px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="outerwear" />
</div>
<div style="float: left; margin-left: 88px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="helmets" />
</div>
<div style="float: left; margin-left: 68px; margin-top: 35px;">
    <input type="radio" name="cat" class="styled" value="other" />
</div>

特定のラジオボタンが選択されている場合、そのラジオボタンに固有のコンテンツが表示される複数のjqueryソリューションを試しました。しかし、私の試みはすべて失敗し、その理由はよくわかりません (他の jquery スクリプトを実行しているので、競合が発生している可能性があります)。

では、例えば…

ラジオボタン"cat"の値が"helmets"選択されている場合、 のコンテンツを表示したいと思いますhelmets。値が に変更された場合は、 を破棄して の内容を表示"other"しましょう。helmets"other"

助けてくれてありがとう！

4

2 に答える 2

1

このようなもの？

例

JS

$('input[type=radio]').click(function(){
    $('.area').hide();
    $('#' + $(this).val()).show(); 
});

CSS

.area{
    display:none;
    background-color:yellow; 
    clear:both; 
}

HTML

<div style="float: left; margin-top: 35px; margin-left: 38px;"><input type="radio" name="cat" class="styled" value="jersey" /></div>
    <div style="float: left; margin-left: 58px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="shorts" /></div>
    <div style="float: left; margin-left: 58px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="shirts" /></div>
    <div style="float: left; margin-left: 58px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="reversible" /></div>
    <div style="float: left; margin-left: 88px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="outerwear" /></div>
    <div style="float: left; margin-left: 88px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="helmets" /></div>
    <div style="float: left; margin-left: 68px; margin-top: 35px;"><input type="radio" name="cat" class="styled" value="other" /></div>

<div class='area' id="jersey">jersey</div>
<div class='area' id="shorts">shorts</div>
<div class='area' id="shirts">shirts</div>
<div class='area' id="reversible">reversible</div>
<div class='area' id="outerwear">outerwear</div>
<div class='area' id="helmets">helmets</div>
<div class='area' id="other">other</div>
于 2013-03-13T03:08:56.880 に答える
0

次のことを試してください。

$('input[name=cat]').change(function() {
   alert($(this).val()); 
});

コードが正しい値を警告する場合は、スイッチを使用して、必要なコンテンツを必要な場所に追加できます。結果が期待どおりでない場合は、何が起こっているのかを調べるために、詳細を提供する必要があります。

于 2013-03-13T03:18:23.537 に答える