jQuery .val() returns 单选按钮未定义

Question

我正在尝试获取 jQuery 中选中的单选按钮值。但它 returns 的值与 'undefined' 一样。我搜索了这个问题的解决方案，但没有任何效果。

我的HTML代码。

<label><input type="radio" class="service" name="service" id="all-service" value="all-service"> All Service</label><br>
<label><input type="radio" class="service" name="service" id="electrician" value="Electrician"> Electrician</label><br>
<label><input type="radio" class="service" name="service" id="painter" value="Painter"> Painter</label><br>
<label><input type="radio" class="service" name="service" id="photo and video coverage" value="Photo and Video Coverage"> Photo and Video Coverage</label>

我的 Jquery 代码..

$(document).ready(function() {
    $(".service").change(function() {
        alert($(".service :checked").val());
    });
});

这里 fiddle 我的问题..

Answer 1

类名和:checked属性之间不应有任何space

 $(".service").change(function() {
        alert($(".service:checked").val());
    });

Fiddle

Answer 2

$(document).ready(function() {
    $(".service").change(function() {
        alert($(this).val());
    });
});

Link to Fiddle.

Answer 3

在 .service 和 :

之间删除一个额外的 space

alert($(".service:checked").val());