如何检索所有选中的复选框并显示在结果表中？

Question

这里需要帮助;）

我正在以一种形式工作，并且很难尝试将所有选中的复选框显示在表格行中。表单的工作方式是在您获得打印结果的选项之前显示所做的所有选择。表单按一系列步骤分解，基本上所有步骤div都隐藏并在单击下一步后显示。 我认为显示所有已选中复选框的问题是我正在使用switch case移动到下一步，如您在JS / Jquery代码中所见：

var valcheck = $('input:checkbox[name=path-school]:checked').val();

                switch (valcheck)
                {
                case 'college':
                  $('#step2-1').slideUp();
                  $('#step3').slideDown();
                  break;
                case 'job':
                    $('#step2-1').slideUp();
                  $('#step3').slideDown();
                  break;
                case 'best':
                $('#step2-1').slideUp();
                  $('#step3').slideDown();
                  break;
                case 'grades':
                $('#step2-1').slideUp();
                 $('#step3').slideDown();
                  break;

                }

请参阅下面我到目前为止所获得的代码，以及此处http://codeplay.pancakeapps.com/

的表单演示

HTML

    

    <!-- #step1 -->
    <div id="step1">
        <h1>Step 1</h1>

        <div class="form">
            <h2>Where do I want to go? (select one)</h2>

            <label class="val" style="width:250px;color:red;"></label><br> 
                <input type="radio" id="school" name="path" value="school" /> School <br>
                <input type="radio" id="home" name="path" value="home" /> Home <br> 
                <input type="radio" id="friends" name="path" value="friends" /> Friends <br>
                <input type="radio" id="activities" name="path" value="activities" /> Activities <br>
                <input type="radio" id="health" name="path" value="health" /> Health <br>
            </div>      
            <div class="clear"></div><!-- /clearfix -->
            <button class="btn btn-primary" type="submit" name="submit_first" id="submit_first" value="">Next</button>
        </div>   
        <div class="clear"></div><!-- /clearfix -->

        <!-- #step2-1 -->
        <div id="step2-1">
            <h1>Step 2-1</h1>
            <div class="form">
            <label class="val2" style="width:250px;color:red;"></label><br> 
                <div id="cbox21">
                    <input type="checkbox"  name="path-school" value="college" /> College <br>
                    <input type="checkbox"  name="path-school" value="job" /> Job <br> 
                    <input type="checkbox"  name="path-school" value="best" /> Best <br>
                    <input type="checkbox"  name="path-school" value="grades" /> Grades <br>
                <!-- <input type="text"  id="personal" name="path-school" value="personal" placeholder="type what you want" /> -->
                </div>    

            </div>      
            <div class="clear"></div><!-- /clearfix -->
            <button class="btn btn-primary" type="submit" name="submit2-1" id="submit2-1" value="">Next</button>
        </div>      
        <div class="clear"></div><!-- /clearfix -->
        <!-- end #step2-1 -->

        <!-- #step3 -->
        <div id="step3">
            <h1>Step 3-1</h1>

            <div class="form">
                <select id="age" name="age">
                    <option> 0 - 17</option>
                    <option>18 - 25</option>
                    <option>26 - 40</option>
                    <option>40+</option>
                </select>
                <label for="age">Your age range. </label> 
                <div class="clear"></div><!-- /clearfix -->

                <select id="gender" name="gender">
                    <option>Male</option>
                    <option>Female</option>
                </select>
                <label for="gender">Your Gender. </label> 
                <div class="clear"></div><!-- /clearfix -->

                <select id="country" name="country">
                    <option>United States</option>
                    <option>United Kingdom</option>
                    <option>Canada</option>
                    <option>Serbia</option>
                    <option>Italy</option>
                </select>
                <label for="country">Your country. </label> 
                <div class="clear"></div><!-- /clearfix -->

            </div>      
            <div class="clear"></div><!-- /clearfix -->
            <button class="btn btn-primary" type="submit" name="submit_third" id="submit_third" value="">Next</button>

        </div>      
        <div class="clear"></div><!-- /clearfix -->

        <!-- #step4 -->
        <div id="step4">
            <h1>Step 4</h1>
            <div class="form">
                <h2>Here is your roadmap!</h2>

                <table class="table table-striped">
                    <!-- <tr><td>Username</td><td></td></tr>
                    <tr><td>Password</td><td></td></tr> -->
                    <tr><td>Path</td><td></td></tr>
                    <tr><td>Path-school</td><td></td></tr>
                    <!-- <tr><td>Email</td><td></td></tr>
                    <tr><td>Name</td><td></td></tr> -->
                    <tr><td>Age</td><td></td></tr>
                    <tr><td>Gender</td><td></td></tr>
                    <tr><td>Country</td><td></td></tr>
                </table>
            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
            <button class="btn btn-primary" type="submit" name="submit_first" id="submit_first" value=""onclick="window.print()">Print roadmap</button>            
        </div>

    </form>
</div>
<div id="progress_bar">
    <div id="progress"></div>
    <div id="progress_text">0% Complete</div>
</div>

CSS

body {
    padding-top: 60px;
    padding-bottom: 40px;
}
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border : none; } 
input[type="submit"]:focus, input[type="button"]:focus { outline : none; }

.clear { clear: both; }
#step1-1 {
background-color: orange;
width: 754px;
height: 370px;
margin: 20px auto;
padding: 50px 0;
/*overflow: hidden;*/
position: relative;
}
#step1-2 {
background-color: green;
width: 754px;
height: 370px;
margin: 20px auto;
padding: 50px 0;
/*overflow: hidden;*/
position: relative;
}
#step1-3 {
background-color: red;
width: 754px;
height: 370px;
margin: 20px auto;
padding: 50px 0;
/*overflow: hidden;*/
position: relative;
}
#step1-4 {
background-color: #CCC;
width: 754px;
height: 370px;
margin: 20px auto;
padding: 50px 0;
/*overflow: hidden;*/
position: relative;
}
#step1-5 {
background-color: #06C;
width: 754px;
height: 370px;
margin: 20px auto;
padding: 50px 0;
/*overflow: hidden;*/
position: relative;
}
#step2-1 {
width: 754px;
height: 370px;
margin: 20px auto;
padding: 50px 0;
/*overflow: hidden;*/
position: relative;
}
.container-decisions {
/*background: url('../images/container.png') no-repeat;*/
width: 754px;
height: 370px;
margin: 20px auto;
padding: 50px 0;
/*overflow: hidden;*/
position: relative;
 }
 .container-decisions #step1, #step2, #step3, #step4, #step1-1,#step1-2,#step1-3,       #step1-4, #step1-5,
 #step2-1,#step2-2,#step2-3,#step2-4,#step2-5 { 
  display: none; 
   }
  .container-decisions #step1 { display: block; }
  .container-decisions .form { margin: 66px 72px 0 72px; }
  .container-decisions h1 span { color: #06C; }

  .container-decisions h2 {
    color: #888;
    font-size: 20px;
    text-align: left;
    text-shadow: none;
 }

 .container-decisions table {
    margin: 20px 40px;
    font-size: 14px;
    font-weight: bold;
    border: solid #CCC 1px;
 }
    .container-decisions table td {
        padding: 5px 10px;
    }
        .container-decisions table td:nth-child(2) {
            font-weight: normal;
        }   

  .container-decisions select {
    background: url('../images/input.png') no-repeat;
    color: #888;
    border: 1px solid #ccc;
    font-family: Cantarell, Verdana, sans-serif;
    font-weight: bold;
    font-size: 15px;
    width: 300px;
    height: 35px;
    padding: 0 25px;
    margin: 20px 0;
    float: left;

    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
  }

    .container-decisions input.submit:focus { border: none; }
    .container-decisions input.send{ background: url('../images/print.png') no-repeat;}  
    .container-decisions input.error { border: 1px solid red; color:red;}
    .container-decisions input.valid { border: 1px solid #1FFF00; }
    .container-decisions select { padding: 5px 0 5px 25px; }
    .container-decisions option { padding: 0 15px; }

 #progress_bar {
  background-color: #EFEFEF;
  width: 339px;
  height: 14px;
  margin: 0 auto;
  position: relative;
 }

 #progress {
  background-color: #D2D2D2;
  width: 0px;
  height: 14px;

  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  }
 #progress_text {
  position: relative;
  line-height: 14px;
  text-align: center;
  font-weight: bold;
  color: #06C;
  width: 339px;
  height: 24px;
  top: -36px;
  left: 0;
 }

JS / JQuery的

$(document).ready(function(){
//original field values
var field_values = {
        //id        :  value
        'school'    : 'destination', 
        'home'      : 'destination',
        'friends'   : 'destination',
        'activities': 'destination',
        'health'    : 'destination',
        'username'  : 'username',
        'password'  : 'password',
        'cpassword' : 'password',
        'firstname' : 'first name',
        'lastname'  : 'last name',
        'email'     : 'email address',
        'job-pays'  : 'job-pays'
    };


//inputfocus
$('input#job-pays').inputfocus({ value: field_values['job-pays'] });
$('input#username').inputfocus({ value: field_values['username'] });
$('input#password').inputfocus({ value: field_values['password'] });
$('input#cpassword').inputfocus({ value: field_values['cpassword'] }); 
$('input#lastname').inputfocus({ value: field_values['lastname'] });
$('input#firstname').inputfocus({ value: field_values['firstname'] });
$('input#email').inputfocus({ value: field_values['email'] }); 

//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');
$('.val').hide();
//step1
$('form').submit(function(){ return false; });
$('#submit_first').click(function(){
    //remove classes
    //$('#step1 input').removeClass('error').removeClass('valid');

    //ckeck if inputs aren't empty
    var path=$ ('#path').val();
    if ($('input:radio[name=path]:checked') .length == 0){
        $('.val').fadeIn(2000) .html('<span>Please select one</span>');
        $('#step1').effect("shake", { times:3 }, 50);
        return false;
    } 

            //update progress bar
            $('#progress_text').html('33% Complete');
            $('#progress').css('width','113px');

            //slide steps
            var valrad = $('input:radio[name=path]:checked').val();

                switch (valrad)
                {
                case 'school':
                  $('#step1').slideUp();
                  $('#step2-1').slideDown();
                  break;
                case 'home':
                    $('#step1').slideUp();
                  $('#step1-2').slideDown();
                  break;
                case 'friends':
                $('#step1').slideUp();
                  $('#step1-3').slideDown();
                  break;
                case 'activities':
                $('#step1').slideUp();
                 $('#step1-4').slideDown();
                  break;
                case 'health':
                $('#step1').slideUp();
                  $('#step1-5').slideDown();
                  break;
                default:

                }
              });

    $('#submit2-1').click(function(){
    //remove classes
    $('#step2-1 input').removeClass('error').removeClass('valid');

    //ckeck if inputs aren't empty
    var path_school=$ ('#path-school').val();
    if ($('input:checkbox[name=path-school]:checked') .length == 0){
        $('.val2').fadeIn(2000) .html('<span>Please select one</span>');
        $('#step2-1').effect("shake", { times:3 }, 50);
        return false;
    } 
            //update progress bar
            $('#progress_text').html('66% Complete');
            $('#progress').css('width','226px');

            //slide steps
            var valcheck = $('input:checkbox[name=path-school]:checked').val();

                switch (valcheck)
                {
                case 'college':
                  $('#step2-1').slideUp();
                  $('#step3').slideDown();
                  break;
                case 'job':
                    $('#step2-1').slideUp();
                  $('#step3').slideDown();
                  break;
                case 'best':
                $('#step2-1').slideUp();
                  $('#step3').slideDown();
                  break;
                case 'grades':
                $('#step2-1').slideUp();
                 $('#step3').slideDown();
                  break;

                }  
        });

    $('#submit_third').click(function(){
    //update progress bar
    $('#progress_text').html('100% Complete');
    $('#progress').css('width','339px');

    //prepare the fourth step
    var fields = new Array(
        $('input:radio[name=path]:checked').val(),
        $('input:checkbox[name=path-school]:checked').val(),

        // $('#email').val(),
        // $('#firstname').val() + ' ' + $('#lastname').val(),
        $('#age').val(),
        $('#gender').val(),
        $('#country').val()                       
        );
    var tr = $('#step4 tr');
    tr.each(function(){
        //alert( fields[$(this).index()] )
        $(this).children('td:nth-child(2)').html(fields[$(this).index()]);
    });

    //slide steps
    $('#step3').slideUp();
    $('#step4').slideDown();            
    });

   $('#submit_fourth').click(function(){
    //send information to server
    alert('Data sent');
   });

   });

非常感谢任何帮助，谢谢！

Answer 1

复选框上有多个值，请尝试。

var arr;
$('input:checkbox[name=path-school]:checked').each(function () {
  arr.push($(this).val());
});

然后浏览数组并将值添加到步骤4。