jQuery .val() возвращает undefined для переключателя

Question

Я пытаюсь получить значение проверенного переключателя в jQuery. Но он возвращает значение как «undefined». Я искал решение для этой проблемы, но ничего не работает для меня.

My HTML Code.

<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 атрибутом

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

Fiddle

Answer 2

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

Link to Fiddle.

Answer 3

Удалить дополнительное пространство bewteen .service и :

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