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"selected，我想显示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 回答