2013-04-02 5 views
3

I이 (워드 프레스에서 잡고있다)에 대한 답변과 함께 체크 박스를 보여줍니다 다음 루프 :잡아 체크 박스 값

$counter = 1; 
foreach ($rows as $row){ ?> 
    <input type="checkbox" name="answer<?php echo $counter; ?>[]" value="<?php echo the_sub_field('answer'); ?>" /> 
    <?php echo $row['answer']; 
} ?> 

이 집합을 통해 루프 큰 루프의 일부입니다 각 질문에 대해 답변을 반복합니다 (위의 코드).

양식을 제출하기 전에 사용자가 체크 박스에 표시 한 값을 표시하려면 어떻게해야합니까?

나는 내가 확인란이 선택되어 있는지 확인하려면 다음을 사용할 수 있습니다 알고

$('form #mycheckbox').is(':checked'); 

나는 모든 루프로 시작하는 경우 확실하지 않다!

답변

0

아래처럼 뭔가를 할 수 있습니다

var divContent = ""; 
$("form input[type=checkbox]:checked").each(function() { 
    divContent += this.value + "<br/>"; 
}); 
$("div").html(divContent); 

완전히 명확하지 않음을 나에게이 실행되어야 할 때. 사용자가 제출 '버튼을 클릭하면 귀하의 질문에서 그러한 경우에 당신은 일치하는 모든 체크 박스를 가져 $("form").submit(function(){...});

+0

질문에서 언급했듯이 제출하기 전에 클릭 한 내용의 요약 페이지 역할을하므로 제출해야합니다. – Rob

+0

글쎄,이 경우 PHP로 다른 페이지처럼 보여주는 것이 낫다. 이 경우에는 jquery가 필요하지 않습니다. 또는 "End Test"와 같은 버튼을 넣을 수 있습니다. 그것을 클릭하면 양식을 숨기고 체크 박스의 데이터가 제출 및 뒤로 버튼과 함께 표시되는 요약 div를 보여줍니다. –

0
var boxes = $('input[type="checkbox"][name^="answer"]'); 

$('#myDiv').empty(); 

boxes.on('change', function() { 
    boxes.filter(':checked').each(function(i, box) { 
     $('#myDiv').append(box.value); 
    }); 
}); 

에 그 코드를 삽입해야하고, 어떻게해야 그렇게 나에게 보이는 때마다 체크 박스 중 하나가 변경 체크 박스의 값으로 div를 업데이트하십시오. 이 PHP 코드로

+0

여기서 일어나는 일에 대해 좀 더 많은 정보를 얻을 수 있습니까? – Rob

+0

@Rob - 설명하려고하겠습니다. 제출 전에 언급 한 적이 있지만 누군가가 제출 버튼을 클릭하면 페이지가 다시로드되기 때문에 요소에 콘텐츠를 추가하는 것이 조금 늦은 것입니다. – adeneo

+0

체크 박스가 변경 될 때마다 ID가 'myDiv' 인 div가 업데이트됩니다. 제출시이를 수행하는 것이 아니라 선호되는 해결책 일 수 있습니다. – Tapirboy

1

당신은 선택 :checked

$.each("#mycheckbox:checked", function() { 
    $("div").append(this.val()); 
}); 
0

는 서버 측 일어나고 제공하는 루프를 사용할 수 있습니다. 양식을 제출 전에 유효성을 검사하지 않으려면 클라이언트에서 (예 : javascript를 사용하여) 수행해야합니다.

따라서 동일한 루프를 사용하지 않고 확인란을 변경하면 실행되는 새 루프를 만듭니다.

PHP 루프의 체크 박스 (예 : class='cb_answer')에 클래스 이름을 추가하는 것이 좋습니다. 이렇게하면 유효성 검사를 수행 할 때 특정 확인란을 안전하게 선택할 수 있습니다.

다음은 체크 박스가 변경 될 때마다 선택한 체크 박스의 값을 div에 추가하는 스크립트 스 니펫입니다. </body> 직전에 이것을 더하십시오. 필요에 맞게 수정해야 할 수도 있습니다.

<script> 
    // make sure jQuery is loaded... 
    $(documet).ready({ 
     // when checkboxes are changed... 
     $('.cb_answer').on('change', function() { 
      // clear preview div... 
      $('#answers_preview').html(''); 
      // loop - all checked checkboxes... 
      $('.cb_answer:checked').each(function() { 
       // add checkbox value to preview div... 
       $('#answers_preview').append(this.val()); 
      }); 
     }); 
    }); 
</script> 

답변과 체크 박스에 대한 class='cb_answer'을 미리 사업부에 대한 id='answers_preview' 가정.