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 显示或隐藏底部单选按钮匹配顶部单选按钮的值，即如果用户单击顶部单选按钮，则列表将根据用户检查的该按钮的值显示。我找到了许多类似的答案，但都是基于类或divs。没有人提到匹配值。所以我不得不发布这个。

我还用这段代码创建了一个小提琴。

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 - 隐藏匹配的单选按钮

编辑

所以如果要隐藏它们，那么每个都应该在一个 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 回答