我正在使用以下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
。没有人告诉过匹配的值。所以我不得不发布这个。
我还使用此代码创建了Fiddle。
答案 0 :(得分: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();
})
DEMO 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();
DEMO 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);
});