Question

我有以下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网站

Answer 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>

Answer 2

你正在寻找这样的东西吗？

使用vanilla js实现。

FIDDLE

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

Answer 3

一种方法如下：

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

JS Fiddle demo

或者您可以使用事件委派并将事件处理程序绑定到父<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);

JS Fiddle demo

参考文献：

Answer 4

使用jquery你可以：

$(#id).change(
     function () { 
         $('#rsvp1').hide(); 
      }
);

Javascript隐藏单选按钮更改时表单的一部分

4 个答案: