Выбранное значение флажок с помощью CSS

Question

У меня есть css

input[type=checkbox]:not(old) + label > span, input[type=radio ]:not(old) + label > span { 
    display : inline-block; 
    width : 30px; 
    height : 30px; 
    margin : 0.25em 0.5em 0.25em 0.25em; 
    border-radius : 0.25em; 
    background : #FFFFFF; 
    border: 1px solid #e0e0e0; 
    vertical-align: middle; 
    position: absolute; 
} 

Я хотел получить проверенное значение флажок со следующим фрагментом кода:

$("input[name=email]:not(old)+ label").click(function() { 
    console.log($("input[name=email]:not(old)").is(':checked')); // getting false         
}) 

HTML

<input name="gender" type="radio" value="Female"> 
<label for="gender"> 
    <span><span></span></span> 
    <p>Female</p> 
</label> 

пустые промежутки предназначены для отображения выбранного флажка в нижнем стиле

Любая помощь будет принята с благодарностью.

Примечание: Я уже видел много поста, как проверить флажок с помощью JQuery и JavaScript в SO, но ни один из них не рядом с моим требованием.

Answer 1

вот ваше обновление код:

$("input").click(function() { 
    console.log($(this).val()); 
}); 

это может использоваться, если вы хотите, чтобы получить флажок/значение радио или если вы хотите, чтобы получить значение пункта лейбла чем использование:

$("input").click(function() { 
    console.log($(this).next('label').children('p').text());         
    }); 

здесь рабочая скрипка http://jsfiddle.net/kuactq01/