我有以下html表单，需要编写javascript来隐藏表单的不同部分，具体取决于所选的顶部单选按钮。
<form action="" method="post">
<label for="number">Number of guests: *
<input name="number" type="radio" value="1" />1
<input name="number" type="radio" value="2" />2
<input name="number" type="radio" value="3" />3
<input name="number" type="radio" value="4" />4
<input name="number" type="radio" value="5" />5
</lable>
<div id="rsvp1">
<label for="name">Name: *
<input name="name" type="text" value="" />
</label>
<label for="attending">Attending?: *
<input name="attending" type="radio" value="Yes" />Yes
<input name="attending" type="radio" value="No" />No
</label>
<label for="dietary">Dietary Requirements?: *
<input type="checkbox" name="dietary" value="veggie">Veggie<br>
<input type="checkbox" name="dietary" value="allergies">Allergies (Please State)<br>
<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies"></textarea>
</label>
<label for="notes">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes"></textarea>
</label>
</div>
<div id="rsvp2">
<label for="name1">Name: *
<input name="name1" type="text" value="" />
</label>
<label for="attending1">Attending?: *
<input name="attending1" type="radio" value="Yes" />Yes
<input name="attending1" type="radio" value="No" />No
</label>
<label for="dietary1">Dietary Requirements?: *
<input type="checkbox" name="dietary1" value="veggie">Veggie<br>
<input type="checkbox" name="dietary1" value="allergies">Allergies (Please State)<br>
<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies1"></textarea>
</label>
<label for="notes1">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes1"></textarea>
</label>
</div>
<div id="rsvp3">
<label for="name2">Name: *
<input name="name2" type="text" value="" />
</label>
<label for="attending2">Attending?: *
<input name="attending2" type="radio" value="Yes" />Yes
<input name="attending2" type="radio" value="No" />No
</label>
<label for="dietary2">Dietary Requirements?: *
<input type="checkbox" name="dietary2" value="veggie">Veggie<br>
<input type="checkbox" name="dietary2" value="allergies">Allergies (Please State)<br>
<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies2"></textarea>
</label>
<label for="notes2">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes2"></textarea>
</label>
</div>
<div id="rsvp4">
<label for="name3">Name: *
<input name="name3" type="text" value="" />
</label>
<label for="attending3">Attending?: *
<input name="attending3" type="radio" value="Yes" />Yes
<input name="attending3" type="radio" value="No" />No
</label>
<label for="dietary3">Dietary Requirements?: *
<input type="checkbox" name="dietary3" value="veggie">Veggie<br>
<input type="checkbox" name="dietary3" value="allergies">Allergies (Please State)<br>
<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies3"></textarea>
</label>
<label for="notes3">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes3"></textarea>
</label>
</div>
<div id="rsvp4">
<label for="name4">Name: *
<input name="name4" type="text" value="" />
</label>
<label for="attending4">Attending?: *
<input name="attending4" type="radio" value="Yes" />Yes
<input name="attending4" type="radio" value="No" />No
</label>
<label for="dietary4">Dietary Requirements?: *
<input type="checkbox" name="dietary4" value="veggie">Veggie<br>
<input type="checkbox" name="dietary4" value="allergies">Allergies (Please State)<br>
<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies4"></textarea>
</label>
<label for="notes4">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes4"></textarea>
</label>
</div>
<input name="submitted" type="hidden" value="1" />
<input type="submit" />
</form>
因此，例如当显示1单选按钮时，将显示rsvp1 div（隐藏div 2,3,4和5）。当按下2单选按钮时，rsvp2和1将显示等。
我知道我可以使用：
document.getElementById(rsvp1).style.visibility="visible";
但是如何设置脚本以更改单选按钮。
如果有任何差异，这将被添加到wordpress网站
答案 0 :(得分：1)
使用像jQuery这样的库会更容易一些。无论如何，使用直接的javascript很容易。
<input id="number1" name="number" type="radio" value="1" />1
<input id="number2" name="number" type="radio" value="2" />2
<input id="number3" name="number" type="radio" value="3" />3
<input id="number4" name="number" type="radio" value="4" />4
<input id="number5" name="number" type="radio" value="5" />5
<script type="text/javascript">
for( var i = 1; i<6; i++) {
document.getElementById('number'+i).onchange = function() {
var index = parseInt(this.value);
for( var j = 1; j<6; j++)
document
.getElementById('rsvp'+j)
.style.display= j > index ? 'none':'block';
};
}
</script>
答案 1 :(得分：0)
使用vanilla js实现。
window.onload = function() {
for (var i = 1; i <= 4; ++ i)
{
(function(index) {
document.getElementById("radioSelector" + index).addEventListener('click', function(){
for (var j = 1; j <=4; ++ j) {
var rsvpElement = document.getElementById('rsvp' + j);
if (j <= index){
rsvpElement.style.display = 'block';
} else {
rsvpElement.style.display = 'none';
}
}
});
})(i);
}
}
答案 2 :(得分：0)
一种方法如下：
function showRSVP() {
// caching the changed element (whose change event called the function):
var checked = this,
// getting the value of that changed element, and changing it to a
// number (in base-10):
n = parseInt(checked.value, 10),
// getting all the 'div' elements whose id starts with 'rsvp':
rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),
// initialising a variable for use later:
tmp;
// iterating over the collection of elements we found earlier:
for (var i = 0, len = rsvpElems.length; i < len; ++i){
// storing the current element over which we're iterating:
tmp = rsvpElems[i];
// if i < n we're showing the rsvp element, otherwise we're hiding it:
tmp.style.display = i < n ? 'block' : 'none';
}
}
// getting all the inputs with type="radio" and name="number":
var radios = document.querySelectorAll('input[name="number"][type="radio"]');
// iterating over that collection:
for (var i = 0, len = radios.length; i < len; i++){
// binding an change event-handler to those radio elements
radios[i].addEventListener('change', showRSVP);
}
或者您可以使用事件委派并将事件处理程序绑定到父<label>元素：
function showRSVP(e) {
// caching the changed-element (e is the event automagically passed
// to the function), e.target is the element upon which the event
// originated:
var checked = e.target,
n = parseInt(checked.value, 10),
rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),
tmp;
for (var i = 0, len = rsvpElems.length; i < len; ++i){
tmp = rsvpElems[i];
tmp.style.display = i < n ? 'block' : 'none';
}
}
// getting a reference to the relevant 'label' element:
var label = document.querySelector('label[for="number"]');
// adding a change event-listener:
label.addEventListener('change', showRSVP);
参考文献：
答案 3 :(得分：-3)
使用jquery你可以：
$(#id).change(
function () {
$('#rsvp1').hide();
}
);