javascript - JQuery 无法从单选按钮读取值

Question

我有一个带有基于图像的单选按钮的表单。我尝试根据所选值(10、30 或 100)进行 AJAX 调用，但尽管选择了 10 以外的值，它还是尝试使用 10。

$(document).ready(function() {
    $('#prodadd').submit(function(e) {
        e.preventDefault();
        var $form = $(this);
        alert($('input[name="size"]').val());
        /* $.ajax({
            url: $form.attr('action'),
            method: $form.attr('method'),
            dataType: 'json',
            data: {
                size: $('input[name="size"]').val(),
                qty: $('input[name="qty"]').val()
            }
        }).done(function(result) {
            $('.cartmess').append(result.message);
        }); */
    });
});

label.prodbutt > input[type="radio"] {
    visibility: hidden;
    position: absolute;
}
label.prodbutt > input[type="radio"]:checked ~ .productbutton {
    visibility: hidden;
}
label.prodbutt > input[type="radio"]:checked ~ .productbuttons {
    visibility: visible;
}
label.prodbutt {
    position: relative;
}
.productbutton {
    height: 25px;
    visibility: visible;
    cursor: pointer;
}
.productbuttons {
    height: 25px;
    visibility: hidden;
    position: absolute;
    left: 0;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="./common/addcart.php" id="prodadd" method="post">
	<strong>Bottle Size</strong><br/>
	<label class="prodbutt">
		<input type="radio" value="10" class="size" name="size" required="required"/>
		<img src="http://i.imgur.com/ODWmTVb.png" class="productbutton"/>
		<img src="http://i.imgur.com/EVx8z9D.png" class="productbuttons"/>
	</label>
	<label class="prodbutt">
		<input type="radio" class="size" value="30" name="size" required="required"/>
		<img src="http://i.imgur.com/lt2KGvA.png" class="productbutton"/>
		<img src="http://i.imgur.com/Fg2rnIU.png" class="productbuttons"/>
	</label> <label class="prodbutt">
		<input type="radio" class="size" value="100" name="size" required="required"/>
		<img src="http://i.imgur.com/1ynBmyJ.png" class="productbutton"/>
		<img src="http://i.imgur.com/YP6PWFP.png" class="productbuttons"/>
	</label> <br/><br/>
	Qty: <input type="text" size="2" maxlength="2" value="1" name="qty" required="required"/><br/><br/>
	<input type="submit" value="Add to Cart"/>
	<div class="cartmess"></div><br/><br/>
</form>

我已经注释掉了我正在进行的 AJAX 调用，并在其位置放置了一个警报以回显 size 中的值。例如，选择 30 将警报 10 而不是 30。

为什么会发生这种情况？

Answer 1

选择器 $('input[name="size"]').val(); 将返回第一个匹配的元素，不一定是第一个检查的元素。最简单的解决方案是使用:

$('input[name="size"]:checked').val();

引用号:https://api.jquery.com/checked-selector/