Javascript 显示基于用户的表行'；行为

仅当用户选择了某些单选按钮时，我才想显示表格的某些部分，例如：

if (radiobutton value == 'address' {
   //show addressrows;
}
else {
   //show other
}

---

我不熟悉Javascript，所以不知道从何处开始。

您需要挂起单选按钮元素的

更改
或
单击
事件。然后，您需要访问表行元素，并将其
display
style属性设置为“无”（隐藏）或“”（显示）

一些注意事项：


要访问元素，您可以使用、或，或使用这些来查找一些基本元素（可能是表），并通过和接口的和其他此类属性进行导航
要附加事件处理程序，您可能需要（在IE上）。（尽管您可以只使用
element.onclick=function（）{…}；
和类似的方法，但这是一种非常有限的方法。）

下面是一些示例，首先直接使用上面的DOM方法，然后看看库如何帮助您

示例：

HTML:


…甚至这也是相当冗长的，因为我想弄清楚我在做什么。它可以完全浓缩：

jQuery(function($) {

  $('input[type=radio][name=rdoOptions][value=on]').click(function() {
    $("#theTable tr.foo").show();
  });
  $('input[type=radio][name=rdoOptions][value=off]').click(function() {
    $("#theTable tr.foo").hide();
  });

});


…甚至是神秘的：

jQuery(function($) {

  $('input[type=radio][name=rdoOptions]').click(function() {
    $("#theTable tr.foo")[this.value === 'on' ? 'show' : 'hide']();
  });

});


（这是因为您可以使用
['name']
访问JavaScript属性，并且函数是proeprites，因此
obj.show（）
和
obj['show']（）
的意思相同。因此它使用三元运算符[
条件？trueValue:false值
]来选择“显示”或“隐藏”作为要调用的函数的名称，然后调用它。但这真的很神秘。）
您可以设置表行的id属性并如下所示隐藏它们：

<table>
   <tr id="address"></tr>
   <tr id="other"></tr>
</table>

<script>
if (radiobutton.value == 'address' {
    document.getElementById("address").style.display = ""; 
    document.getElementById("other").style.display = "none";
}
else {
    document.getElementById("address").style.display = "none"; //hide the row
    document.getElementById("other").style.display = ""; //show the row
}         
</script>


如果（radiobutton.value=='地址'{
document.getElementById（“地址”）.style.display=“”；
document.getElementById（“其他”）.style.display=“无”；
}
否则{
document.getElementById（“地址”）.style.display=“无”//隐藏行
document.getElementById（“其他”）.style.display=“”；//显示行
}         
但是关于radiobutton值的条件子句如何？修改了我的响应以包含if语句。onclick=“placerow.style.display=”show（）”这不起作用，但可能会起作用吗？它不应该起作用。请尝试将所有内容包装在单独的函数中，并像这样调用它：onclick=“toggle（）”很感谢添加示例！）
jQuery(function($) {

  $('input[type=radio][name=rdoOptions][value=on]').click(function() {
    $("#theTable tr.foo").show();
  });
  $('input[type=radio][name=rdoOptions][value=off]').click(function() {
    $("#theTable tr.foo").hide();
  });

});

jQuery(function($) {

  $('input[type=radio][name=rdoOptions]').click(function() {
    $("#theTable tr.foo")[this.value === 'on' ? 'show' : 'hide']();
  });

});

<table>
   <tr id="address"></tr>
   <tr id="other"></tr>
</table>

<script>
if (radiobutton.value == 'address' {
    document.getElementById("address").style.display = ""; 
    document.getElementById("other").style.display = "none";
}
else {
    document.getElementById("address").style.display = "none"; //hide the row
    document.getElementById("other").style.display = ""; //show the row
}         
</script>