Question

我有以下循环，它显示一个复选框和一个答案（从Wordpress中抓取）：

$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'];
} ?>

这是一个更大的循环的一部分，循环遍历一组问题，并且每个问题都循环通过答案（上面的代码）。

如何在提交表单之前抓取用户已选中的复选框并在div中显示值？

我知道我可以使用以下内容来检查复选框是否已选中：

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

我不知道从哪里开始循环！

Answer 1

您可以使用选择器:checked

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

Answer 2

您可以执行以下操作：

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

在执行此操作时，我并不完全清楚。从您的问题来看，我认为当用户点击提交按钮时会发生这种情况，在这种情况下，您只需将该代码放入$("form").submit(function(){...});

Answer 3

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。

Answer 4

你提供的循环正在发生在服务器端，因为它是php代码。当您要在> 提交之前验证表格时，您必须在客户端上进行验证，即使用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>

假设id='answers_preview'为div预览答案，class='cb_answer'为复选框。

在表单提交之前抓取复选框值

4 个答案: