动态展示和基于另一个单选按钮的输出单选按钮隐藏的

Question

我用下面的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 s。没有人讲过匹配值。所以我不得不发布这个。

我也用这段代码创建了一个Fiddle。

Answer 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); 
});