javascript - 使用单选按钮显示文本区域和复选框

Question

如下所示，我正在进行一项调查，我花了大半夜的时间让单选按钮正常工作，现在我遇到了一个新问题。当用户单击提交时，除了单选按钮之外，我如何才能显示文本字段和复选框。

目前，仅记录和显示问题 2 的回答。谢谢你

http://jsbin.com/zuxoqe/1/edit?html,output

HTML

<div id="container">

<div id="main" class="cf">
        <div id="content">
            <div id="text">

<form action="#" method="post" class="mySurvey" id="mySurveyID">
    <fieldset>

        <p>Personal Information:
        <br>
        First name: <label><input type="text" name="firstname" value=""></label>
        <br>
        Last name: <label><input type="text" name="lastname" value=""></label>
        <br>
        Gender:
        <select name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
        </select></p>

    <p>Question 1: How did you hear about us? Check ALL that apply</p>
    <p>
        <label><input type="checkbox" name="Q3" value="internet">Internet<label>
        <label><input type="checkbox" name="Q3" value="tv">TV<label>
        <label><input type="checkbox" name="Q3" value="radio">Radio<label>
        <label><input type="checkbox" name="Q3" value="newspaper">Newspaper<label>
        <label><input type="checkbox" name="Q3" value="mouth">Word of Mouth<label>
    </p>

    <p>Question 2: Overall HOW would you rate your Sales Representative?</p>
    <p>
        <label><input type="radio" name="ques5" value="Amazing"> Amazing</label>
        <label><input type="radio" name="ques5" value="Very Good"> Very Good</label>
        <label><input type="radio" name="ques5" value="Neutral"> Neutral</label>
        <label><input type="radio" name="ques5" value="Fair"> Fair</label>
        <label><input type="radio" name="ques5" value="Poor"> Poor</label>
    </p>

    <p>Question 3: What factors contributed to your purchase of this product?
    <p> 
        <label><textarea name="Q2" rows="5" cols="60"></textarea><label>
    </p>

    <p><button type="button" name="getSelection">Submit</button></p>
    </fieldset>
</form>

            </div> <!-- end text -->
        </div> <!-- end content -->

</div> <!-- end container div -->         

</body>
</html>

JS

<script type="text/javascript">
// to remove from global namespace
(function() {

    function getRadioSelection(form, name) {
        var val;
        var radios = form.elements[name];

        for (var i=0, len=radios.length; i<len; i++) {
            if ( radios[i].checked ) {
                val = radios[i].value;
                break;
            }
        }
        return val;
    }


    document.forms['mySurveyID'].elements['getSelection'].onclick = function() {
        alert( 'The selected radio button\'s value is: ' + getRadioSelection(this.form, 'ques5') );
    };


    // disable submission of all forms on this page
    for (var i=0, len=document.forms.length; i<len; i++) {
        document.forms[i].onsubmit = function() { return false; };
    }

}());
</script>

Answer 1

您不需要使用自定义循环来检索选定的组合或复选框。如果我有什么建议，你可以使用 querySelector和 querySelectorAll专为此而设计。

您可能还想使用 form.addEventListener("submit", callback);而不是 form.onsubmit，这样您就可以为表单的提交添加多个监听器，并且您不必侵入按钮的 onclick 事件。

这是一个工作示例:

// Avoid polluting global namespace.
(function() {
    // Helpers
    function forEach(list, callback){ return Array.prototype.forEach.call(list, callback); };
    function map(list, callback){ return Array.prototype.map.call(list, callback); };
  
    var survey = document.forms['mySurveyID'];
    // Listen for submit events (need a "submit" input instead of
    // "button", cf HTML).
    survey.addEventListener("submit", function(eat){
      // Retrieve question 1's checked inputs.
      var q1CheckedInputs = survey.querySelectorAll("input[name=Q3]:checked");
      // Extract inputs' values.
      var q1Answers = map(q1CheckedInputs, function(inputNode){
        return inputNode.value;
      });

      // Retrieve question 2's answer.
      var q2Answer = survey.querySelector("input[name=ques5]:checked").value;

      // Retrieve question 3's answer
      var q3Answer = survey.querySelector("textarea[name=Q2]").value;

      // Show results.
      alert('Q1: "' + q1Answers.join('", "') + '\n' +
            'Q2: "' + q2Answer + '\n' +
            'Q3: "' + q3Answer + '"');
    });
    
    // Disable submission of all forms on this page.
    forEach(document.forms, function(form){
      form.addEventListener("submit", function(evt){
        evt.preventDefault();
      });
    });
    
}());

<!DOCTYPE html>
<body>

<div id="container">
    
<div id="main" class="cf">
        <div id="content">
            <div id="text">

<form action="#" method="post" class="mySurvey" id="mySurveyID">
    <fieldset>

		<p>Personal Information:
        <br>
        First name: <label><input type="text" name="firstname" value=""></label>
        <br>
		Last name: <label><input type="text" name="lastname" value=""></label>
        <br>
        Gender:
        <select name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
        </select></p>
		
	<p>Question 1: How did you hear about us? Check ALL that apply</p>
	<p>
		<label><input type="checkbox" name="Q3" value="internet">Internet<label>
		<label><input type="checkbox" name="Q3" value="tv">TV<label>
		<label><input type="checkbox" name="Q3" value="radio">Radio<label>
		<label><input type="checkbox" name="Q3" value="newspaper">Newspaper<label>
		<label><input type="checkbox" name="Q3" value="mouth">Word of Mouth<label>
	</p>
	
    <p>Question 2: Overall HOW would you rate your Sales Representative?</p>
    <p>
        <label><input type="radio" name="ques5" value="Amazing"> Amazing</label>
        <label><input type="radio" name="ques5" value="Very Good"> Very Good</label>
        <label><input type="radio" name="ques5" value="Neutral"> Neutral</label>
        <label><input type="radio" name="ques5" value="Fair"> Fair</label>
		<label><input type="radio" name="ques5" value="Poor"> Poor</label>
    </p>
	
	<p>Question 3: What factors contributed to your purchase of this product?
	<p>	
		<label><textarea name="Q2" rows="5" cols="60"></textarea><label>
    </p>
	
    <p><button type="submit" name="getSelection">Submit</button></p>
    </fieldset>
</form>

            </div> <!-- end text -->
        </div> <!-- end content -->

</div> <!-- end container div -->         


</body>
</html>