javascript - 我无法从我的复选框中获取值，我需要将提交按钮下的复选框上的值打印到 div 中

Question

  <div data-role="fieldcontain"> 
      <label for="selectmenu" class="select">Preferred Seating:</label> <!-- Following drop down checkbox -->
      <select name="selectmenu" id="selectmenu">
        <option name="selectmenu" value="200" id="lowerArea" >Lower Area($200)</option>
        <option name="selectmenu" value="150" checked="checked" id="levelOne">Level 1($150)</option>
        <option name="selectmenu" value="100" id="levelTwo">Level 2($100)</option>
        <option name="selectmenu" value="200" id="balcony">Balcony($200)</option>
      </select>
    </div>
    <!--End of DropDownBoxes-->
    <!--START OF CHECK BOXES-->

    <div data-role="fieldcontain">
      <fieldset data-role="controlgroup">

        <legend>Prefered night:</legend>
     <input type="radio" name="checkbox1" id="checkbox1_0" class="custom" value=""  checked="checked" /></option>
        <label for="checkbox1_0">Thursday</label>
        <br />
            <input type="radio" name="checkbox1" id="checkbox1_1" class="custom" value="" />
                <label for="checkbox1_1">Friday</label>
                <br><!--Break as on Example-->
                    <input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />
                    <label for="checkbox1_2">Saturday</label>
      </fieldset><!-- Above are check boxes -->
    </div> 

    <!--END OF CHECK BOXES-->
<!--Put a tick box here that asks for weekly mail-->
         <button type="submit" value="Register" onClick="validateGalaOrder()"></button>
            <p id="OrderInput"></p><!--USERS INPUT RETURNS TO THIS <P>-->
            <p id="tktCost"></p>
            <p id="orderErrorMsg"></p><!--INCORRECT INPUT MESSAGES RETURN TO THIS <P>-->

复选框之间应该有中断，目前我无法打印“星期六”变量!

    function validateGalaOrder() {
var orderErrorMsg = "";         
var OrderInput = "";    
var ValidateOrderName = document.getElementById('txtOrderName').value;
var numTickets = document.getElementById('numTickets').value;
var Orderemail = document.getElementById('txtOrderEmail');      
var filter =  /*Email Symbol and letter Validator*/  /^([a-zA-Z0-9_.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;//This filters out the email input

var lowerLvl = document.getElementById('lowerArea').value;
var lvlOne = document.getElementById('levelOne').value;
var lvlTwo= document.getElementById('levelTwo').value;
var Balcony =  document.getElementById('balcony').value;
var cost = '';

var prefNight;


 if(ValidateOrderName.length <= 2){
            orderErrorMsg += ("<b>-ERROR- Please enter a valid name with a length of at least 3 letters</b>");
            document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
                document.getElementById('txtOrderName').value = '';//will clear input field if false.
                    document.getElementById('txtOrderName').focus();//this Focuses on textbox if input is wrong. 
                            //alert("-ERROR- Please enter a name more than one letter!"); 
                document.getElementById('OrderInput').innerHTML = '';//If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message

        return false;
    } 


  if (!filter.test(Orderemail.value)) {
            orderErrorMsg += ("<b>-ERROR- Please provide a valid email address.</b>");  
            document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
                document.getElementById('txtOrderEmail').value = '';
                     document.getElementById('txtOrderEmail').focus();//this Focuses on textbox if input is wrong.   
                            // alert('Please provide a valid email address');
                document.getElementById('OrderInput').innerHTML = '';//If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
        return false;
    }  

    if(numTickets <= 0){
        orderErrorMsg += ("<b>-ERROR- Please enter an amount of tickets greater than zero</b>");
        document.getElementById('orderErrorMsg').innerHTML = orderErrorMsg;
            document.getElementById('numTickets').value = '';
                document.getElementById('numTickets').focus();//this Focuses on textbox if input is wrong.
                        /*alert("-ERROR- Please enter a mobile number with exactly 10 numeric digits");*/
                document.getElementById('OrderInput').innerHTML = '';//If someone decides to change there input and that changed input is wrong then this will clear the other data from under the button and just show the error message
        return false;
    }


        if(document.getElementById('checkbox1_0').checked == true){
            prefNight = 'Thursday';
        }
            if(document.getElementById('checkbox1_1').checked == true){
                prefNight = 'Friday';
            }
                if(document.getElementById('checkbox1_2').checked == true){
                prefNight = 'saturday';
                }




    else{
            cost = parseInt(document.getElementById('selectmenu').value,10) * numTickets;  //This calculates the cost
            var Orderemail = document.getElementById('txtOrderEmail').value;
         OrderInput += ("Thank You " + "<b>"+ValidateOrderName+"</b>" + " For ordering your tickets" + "<br /> <br />" + "Number of tickets ordered: " + "<b>" + numTickets +"</b>" +
        "<br>" + "Your email is: " + "<b>" + Orderemail + "</b>" + "<br /> The total cost will be: "+ "<b>$"+ cost + "</b>" + prefNight);
                document.getElementById('OrderInput').innerHTML = OrderInput;//This prints the users details.
                    document.getElementById('orderErrorMsg').innerHTML = '';

    }   
    return true;

}

大家好，我已经更新了我的代码，基本上现在我可以打印“星期四”和“星期五”，但我无法打印“星期六”!

Answer 1

您使用的是单选按钮而不是复选框!

<input type="radio" name="checkbox1" id="checkbox1_2" class="custom" value="" />

应该是

<input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value="" />

对于 ID 为“checkbox1_2”的单选按钮，您可以使用 -

var rates = document.getElementById('checkbox1_2').value;

查看是否已选中，您可以使用--

var checked=document.getElementById('checkbox1_2').checked;

或者通过jquery

$('input[name=checkbox1]:checked').val();