javascript - 复选框选择运行 javascript 调用，但未获取所有值

Question

在用户选择不同选项时计算商品成本的表单存在一些问题。因此，选择第一个选项，它将显示选项选择，然后向下移动到下一个选项步骤并选择一个选项，它将显示您刚刚选择的选项，但随后会将第一个选项设置为未定义。

我在这里创建了一个 jsfiddle https://jsfiddle.net/2k5u3tc0/

<div>
<h2>Step One</h2>
<input type="radio" name="size" id="sm" value="Small" class="size" /><label for="">Small</label>
<input type="radio" name="size" id="md" value="Medium" class="size" /><label for="">Medium</label>
<input type="radio" name="size" id="cu" value="Custom" class="size" /><label for="">Custom</label>
</div>
<div>
<h2>Step Two</h2>
<input type="radio" name="print" id="ss" value="Single Sided" class="size" /><label for="">Single Sided</label>
<input type="radio" name="print" id="ds" value="Double Sided" class="size" /><label for="">Doubled Sided</label>
</div>
<div>
<h2>Step Three</h2>
<input type="radio" name="finish" id="sc" value="Straight cut" class="size" /><label for="">Straight cut</label>
<input type="radio" name="finish" id="he" value="Hemmed edges" class="size" /><label for="">Hemmed edges</label>
<input type="radio" name="finish" id="ey" value="Eyelets" class="size" /><label for="">Eyelets</label>
<input type="radio" name="print" id="re" value="Reinforced edges" class="size" /><label for="">Reinforced edges</label>
</div>
<div id="totalPrice"></div>

JQuery

$(function() {
$(".size, .print").click(function() {
//$(document).on("change","#frmProduct", function() {

    var size = $(".size:checked").val();
    var print = $(".print:checked").val();

    var dataString = 'size='+ size +'&print='+ print;

    $.ajax({
        type: "POST",
        url: "../../../inc/calculate.php",
        data: dataString,
        cache: false,
        success: function(html){
            $("#totalPrice").html(html);
        }
    });

    return false;
});
});

在javascript中它加载了一个名为calculate.php的php页面，这里的代码非常简单

$size=$_POST['size']; 
$print=$_POST['print'];
$finish= $_POST['finish'];
$ipadress = $_SERVER['REMOTE_ADDR'];
$datenow = strtotime(date('d-m-Y H:i:s'));
$today = strtotime(date('d-m-Y'));

echo $size.' '.$print.' '.$finish.' '.$today;

但这会返回类似

的内容

Small undefined 1491519600

然后，如果您转到第二步并选择一个，它将是

undefined Single Sided 1491519600

Answer 1

出现问题是因为当您选择一个单选按钮时，其他输入中的按钮未被选中(在 js 中未定义)并且该值在单击时发送到您的 php。

return false; 阻止 radio 在点击时被实际选中。

您需要删除 return false; 并根据您希望它如何工作确保在发送 AJAX 之前选择了两个输入组。