Question

我有一个包含基于图像的单选按钮的表单。我试图根据所选的值（10,30或100）进行AJAX调用，但是尽管选择了10以外的其他内容，它会尝试使用10来代替。

＆＃13;

Select 
    case when table1.field1 is null then 
        case when table1.field2 is null then 'undefined'
        else table1.field2 end 
    else table1.field1 end as field1
from tablename

＆＃13;

$(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);
        }); */
    });
});

＆＃13;

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;
}

＆＃13;

我已经注释了我正在制作的AJAX电话，并在其位置发出警报以回应<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>中的值。例如，选择30将提醒10而不是30。

为什么会这样？

Answer 1

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

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

参考：https://api.jquery.com/checked-selector/

Answer 2

你可以在数组中获得单选按钮的选中值

function chk_check() { $('input[name="e_radio"]:checked').each(function() { chk.push($(this).val()); }) }

这个函数会给你一个数组＆＃34; chk＆＃34;

JQuery无法从单选按钮读取值

2 个答案: