Question

以下是我的单选按钮：

<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"的内容。

感谢您的帮助！

Answer 1

这样的东西？

Example

<强> 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>

Answer 2

尝试以下方法：

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

如果您的代码提醒正确的值，您可以使用开关在您想要的位置添加所需的内容。如果结果不符合预期，您需要向我们提供更多详细信息，以了解正在发生的事情。

根据所选的单选按钮更改内容

2 个答案:

Example