Fieldset OnClick получать радио-кнопка нажата значение

Question

У меня есть Fieldset в моем HTML, который в основном представляет 5 звезд рейтинговой системы, как следующее:

<fieldset class="rating" id="ratingSystem"> 
    <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label> 
    <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label> 
    <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label> 
    <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label> 
    <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label> 
</fieldset> 

И я определил событие OnClick, который определяет, когда пользователь нажимает на некоторых из звездные рейтинги (радиокнопки), то я бы просто для тестирования отображал значение щелчка, но я всегда получаю двойные значения вместо отображаемого ...

Например, если я нажал на 5, консоль:

undefined 
5 

Второй раз я нажимаю на 4 я получаю значение:

5 
4 

кода я использую для этого является:

$('#ratingSystem').click(function() { 
     console.log($('input[name=rating]:checked').val()); 
    }); 

Что я делаю неправильно здесь?

Edit, эти классы CSS, которые я использую, чтобы включить радио кнопки в звезды, так что он выглядит как звезда рейтинговой системы:

fieldset, label { margin: 0; padding: 0; } 
body{ margin: 20px; } 
h1 { font-size: 1.5em; margin: 10px; } 

/****** Style Star Rating Widget *****/ 

.rating { 
    border: none; 
    float: left; 
} 

.rating > input { display: none; } 
.rating > label:before { 
    margin: 5px; 
    font-size: 1.25em; 
    font-family: FontAwesome; 
    display: inline-block; 
    content: "\f005"; 
} 

.rating > .half:before { 
    content: "\f089"; 
    position: absolute; 
} 

.rating > label { 
    color: #ddd; 
float: right; 
} 

/***** CSS Magic to Highlight Stars on Hover *****/ 

.rating > input:checked ~ label, /* show gold star when clicked */ 
.rating:not(:checked) > label:hover, /* hover current star */ 
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */ 

.rating > input:checked + label:hover, /* hover current star when changing rating */ 
.rating > input:checked ~ label:hover, 
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */ 
.rating > input:checked ~ label:hover ~ label { color: #FFED85; } 

Может ли из этих классов быть источником проблемы?

Answer 1

Вы можете связать другое событие с checkbox где-то в другом месте, но вы можете проверить рабочий снимок ниже на основе вашего кода OP, который показывает, что огонь console.log срабатывает только один раз при нажатии.

Я предлагаю, чтобы прикрепить щелчок на вход непосредственно получить текущее значение проверяется, используя только:

$(this).val(); 

Надеется, что это помогает.

$('#ratingSystem input').click(function() { 
 
    console.log($(this).val()); 
 
});

fieldset, label { margin: 0; padding: 0; } 
 
body{ margin: 20px; } 
 
h1 { font-size: 1.5em; margin: 10px; } 
 

 
/****** Style Star Rating Widget *****/ 
 

 
.rating { 
 
    border: none; 
 
    float: left; 
 
} 
 

 
.rating > input { display: none; } 
 
.rating > label:before { 
 
    margin: 5px; 
 
    font-size: 1.25em; 
 
    font-family: FontAwesome; 
 
    display: inline-block; 
 
    content: "\f005"; 
 
} 
 

 
.rating > .half:before { 
 
    content: "\f089"; 
 
    position: absolute; 
 
} 
 

 
.rating > label { 
 
    color: #ddd; 
 
    float: right; 
 
} 
 

 
/***** CSS Magic to Highlight Stars on Hover *****/ 
 

 
.rating > input:checked ~ label, /* show gold star when clicked */ 
 
.rating:not(:checked) > label:hover, /* hover current star */ 
 
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */ 
 

 
.rating > input:checked + label:hover, /* hover current star when changing rating */ 
 
.rating > input:checked ~ label:hover, 
 
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */ 
 
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<fieldset class="rating" id="ratingSystem"> 
 
    <input type="radio" id="star5" name="rating" value="5" /><label class="full" for="star5" title="Awesome - 5 stars"></label> 
 
    <input type="radio" id="star4" name="rating" value="4" /><label class="full" for="star4" title="Pretty good - 4 stars"></label> 
 
    <input type="radio" id="star3" name="rating" value="3" /><label class="full" for="star3" title="Meh - 3 stars"></label> 
 
    <input type="radio" id="star2" name="rating" value="2" /><label class="full" for="star2" title="Kinda bad - 2 stars"></label> 
 
    <input type="radio" id="star1" name="rating" value="1" /><label class="full" for="star1" title="Sucks big time - 1 star"></label> 
 
</fieldset>

Answer 2

Попробуйте подключить событие к каждому input элементов:

$('#ratingSystem input').click(function() { 
 
    console.log($(this).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<fieldset class="rating" id="ratingSystem"> 
 
    <input type="radio" id="star5" name="rating" value="5" /> 
 
    <label class="full" for="star5" title="Awesome - 5 stars"></label> 
 
    <input type="radio" id="star4" name="rating" value="4" /> 
 
    <label class="full" for="star4" title="Pretty good - 4 stars"></label> 
 
    <input type="radio" id="star3" name="rating" value="3" /> 
 
    <label class="full" for="star3" title="Meh - 3 stars"></label> 
 
    <input type="radio" id="star2" name="rating" value="2" /> 
 
    <label class="full" for="star2" title="Kinda bad - 2 stars"></label> 
 
    <input type="radio" id="star1" name="rating" value="1" /> 
 
    <label class="full" for="star1" title="Sucks big time - 1 star"></label> 
 
</fieldset>