我想仅在用户选择了某个单选按钮时显示我表格的某些部分，例如：
if (radiobutton value == 'address' {
//show addressrows;
}
else {
//show other
}
我是Javascript的新手，所以我不知道从哪里开始。
答案 0 :(得分：2)
您需要挂钩单选按钮元素的change或click事件。然后，您将要访问表行元素并将其display样式属性设置为“无”（隐藏）或“”（显示）。
一些注意事项：
document.getElementById或getElementsByTagName，或使用这些元素查找某些基本元素（可能是表格）并通过childNodes和其他此类属性进行导航Node和Element接口。addEventListener（IE上为attachEvent）。 （虽然你可以只使用element.onclick = function() { ... };和类似的，但这是一种非常有限的方法。）以下是一些示例，首先直接使用上面的DOM方法，然后查看库如何帮助您。
示例：
HTML：
<body>
<label><input type='radio' name='rdoOptions' value='on' checked>On</label>
<label><input type='radio' name='rdoOptions' value='off'>Off</label>
<table id='theTable'>
<tbody>
<tr class='foo'>
<td>This cell is in a 'foo' row</td>
</tr>
<tr>
<td>This is not</td>
</tr>
<tr>
<td>This is not</td>
</tr>
<tr class='foo'>
<td>This cell is in another 'foo' row</td>
</tr>
<tr class='foo'>
<td>This cell is in a 'foo' row</td>
</tr>
<tr>
<td>This is not</td>
</tr>
</tbody>
</table>
<script>(...the code below...)</script>
</body>
JavaScript的：
// This code is inserted where you see %code% in the
// HTML panel on the right. Note that that's just before
// the closing body tag -- that's important, because our
// `init` function assumes the radio buttons already exist
// in the DOM, so this code must be *after* them in the
// markup.
(function() {
init();
function init()
{
var list, index, elm;
// Find the buttons and attach handlers to them
list = document.getElementsByTagName('input');
for (index = 0; index < list.length; ++index) {
elm = list[index];
if (elm.type === 'radio' && elm.name === 'rdoOptions') {
hookEvent(elm, 'click', radioClickHandler);
}
}
}
function radioClickHandler(event) {
var showFlag;
// On IE, the event isn't passed as an argument, it's a global
// property of `window`, so we handle that with the curiously-
// powerful || operator. More about ||:
// http://blog.niftysnippets.org/2008/02/javascripts-curiously-powerful-or.html
event = event || window.event;
// In an event handler, `this` will refer to the element the
// handler is attached to
// Show if the button clicked was "on", hide otherwise
showOrHideRows(this.value === 'on');
}
function showOrHideRows(showFlag) {
var displayValue, table, rows, index, row;
// Determine our display value
displayValue = showFlag ? "" : "none";
// Get the table, then find all the rows in it
table = document.getElementById('theTable');
rows = table.getElementsByTagName('tr');
// Loop through them, showing or hiding
for (index = 0; index < rows.length; ++index) {
// Get this row
row = rows[index];
// Is it a 'foo' row?
// Note: This check only works if 'foo' is the ONLY class
// on the row, which isn't very realistic
if (row.className === 'foo') {
// Yes, show or hide it by assigning our display value
row.style.display = displayValue;
}
}
}
function hookEvent(element, eventName, handler) {
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
}
else if (element.attachEvent) {
element.attachEvent("on" + eventName, handler);
}
else {
element["on" + eventName] = handler;
}
}
})();
偏离主题：使用jQuery，Prototype，YUI这样的库，可以更轻松地使用批次 ，Closure或any of several others。它们消除了许多浏览器差异，并提供了许多附加功能。
例如，这里是使用JQuery的上述JavaScript：
jQuery(function($) {
// Find our radio buttons and hook up the handler
$('input[type=radio][name=rdoOptions]').click(handleRadioClick);
// Our radio button click handler
function handleRadioClick(event) {
// Show if the button clicked was "on", hide otherwise
showOrHideRows(this.value === 'on');
}
// Show or hide rows
function showOrHideRows(showFlag) {
var rows = $("#theTable tr.foo");
if (showFlag) {
rows.show();
}
else {
rows.hide();
}
}
});
......甚至那是相当冗长的，因为我想清楚我在做什么。它可以得到彻底的浓缩：
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属性，并且函数是proeprties，因此obj.show()和obj['show']()意味着相同的事情。所以它使用三元运算符[{ {1}}]选择“show”或“hide”作为要调用的函数的名称，然后调用它。但这真的很神秘。）
答案 1 :(得分：0)
您可以设置表格行的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>