결과 테이블에서 확인하고 표시하는 모든 체크 박스를 검색하려면 어떻게합니까?

Question

여기에서 도움이 필요합니다.)

양식으로 작업 중이며 확인란을 모두 선택하여 테이블 행에 표시하는 데 어려움을 겪고 있습니다. 양식이 작동하는 방식은 결과를 인쇄하기 전에 모든 선택 사항을 표시하는 것입니다. 양식은 일련의 단계로 세분화됩니다. 기본적으로 모든 단계 div는 숨겨지고 다음을 클릭하면 표시됩니다.

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; 

       } 

은 내가 가진 코드 아래 참조 : 나는 모든 체크 체크 박스를 보여주는 문제가 당신이 JS/jQuery 코드에서 볼 수있는 다음 단계로 이동하려면 스위치 케이스를 사용하고 있다고 생각 지금까지, 또한 여기 형태의 데모 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.