1

在这里需要帮助；）

我正在使用一种表格，并且很难尝试让所有选中的复选框显示在表格行中。表单应该工作的方式是显示在您选择打印结果之前所做的所有选择。表单被分解成一系列的步骤，基本上所有步骤的div都被隐藏，点击next后显示。我认为显示所有选中复选框的问题在于我正在使用开关盒进入下一步，正如您在 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');
   });

   });

对此的任何帮助将不胜感激，谢谢！

4

1 回答 1

0

您在复选框上有多个值，因此请尝试。

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

然后遍历数组并将值添加到步骤 4。

于 2013-08-20T12:29:50.150 回答