php - 在提交表单之前获取复选框值

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');

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

score 1 · Accepted Answer

您可以使用选择器:checked

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

score 0 · Accepted Answer

您提供的循环发生在服务器端，因为它是 php 代码。当您不想在提交前验证表单时，您必须在客户端进行验证，即使用 javascript。

因此，您不会使用相同的循环，而是创建一个在任何复选框更改时运行的新循环。

我建议您class='cb_answer'在 php 循环中的复选框（如）中添加一个类名。这将帮助您在进行验证时安全地选择特定的复选框。

这是一个脚本片段，每次更改任何复选框时，都会将选定复选框的值添加到 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'复选框。

score 0 · Accepted Answer

您可以执行以下操作：

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

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

score 0 · Accepted Answer

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 - 在提交表单之前获取复选框值

4 回答 4

Related

Reference