Javascript 字段集onclick获取单选按钮单击值

我的HTML中有一个字段集，它基本上代表了五星评级系统，如下所示：

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

第二次单击4时，我得到值：

5
4

我使用的代码是：

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

我做错了什么

编辑，这些是我用来将单选按钮变成星星的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;  } 

---

这些类中的任何一个可能是问题的根源吗？

您可以将另一个事件附加到

复选框的其他地方，但是您可以根据您的操作代码检查下面的工作片段，显示
控制台.log
只需单击一次即可触发

我建议直接将单击附加到输入，然后使用以下方法获取当前选中值：

$(this).val();

希望这有帮助


$（“#评级系统输入”）。单击（函数（）{
log（$（this.val（））；
});
fieldset，标签{margin:0；padding:0；}
正文{页边距：20px；}
h1{字体大小：1.5em；边距：10px；}
/******样式星级小部件*****/
.评级{
边界：无；
浮动：左；
}
.rating>输入{显示：无；}
.rating>标签：在{
保证金：5px；
字号：1.25em；
字体系列：Fontsome；
显示：内联块；
内容：“\f005”；
}
.rating>.half:在{
内容：“\f089”；
位置：绝对位置；
}
.rating>标签{
颜色：#ddd；
浮动：对；
}
/*****CSS魔术突出悬停上的星星*****/
.rating>输入：选中~label，/*单击时显示金星*/
.评级：未（：选中）>标签：悬停，/*悬停当前星*/
.rating:not（：checked）>label:hover~label{color:#FFD700；}/*悬停列表中的前几颗星*/
.评级>输入：选中+标签：悬停，/*更改评级时悬停当前星号*/
.评级>输入：选中~标签：悬停，
.rating>label:hover~input:checked~label，/*点亮当前选择*/
.rating>输入：选中~label:hover~label{color:#FFED85；}
您可以将另一个事件附加到
复选框
的其他位置，但您可以根据您的操作代码检查下面的工作片段，显示
控制台.log
只需单击一次即可启动

我建议直接将单击附加到输入，然后使用以下方法获取当前选中值：

$(this).val();

希望这有帮助


$（“#评级系统输入”）。单击（函数（）{
log（$（this.val（））；
});
fieldset，标签{margin:0；padding:0；}
正文{页边距：20px；}
h1{字体大小：1.5em；边距：10px；}
/******样式星级小部件*****/
.评级{
边界：无；
浮动：左；
}
.rating>输入{显示：无；}
.rating>标签：在{
保证金：5px；
字号：1.25em；
字体系列：Fontsome；
显示：内联块；
内容：“\f005”；
}
.rating>.half:在{
内容：“\f089”；
位置：绝对位置；
}
.rating>标签{
颜色：#ddd；
浮动：对；
}
/*****CSS魔术突出悬停上的星星*****/
.rating>输入：选中~label，/*单击时显示金星*/
.评级：未（：选中）>标签：悬停，/*悬停当前星*/
.rating:not（：checked）>label:hover~label{color:#FFD700；}/*悬停列表中的前几颗星*/
.评级>输入：选中+标签：悬停，/*更改评级时悬停当前星号*/
.评级>输入：选中~标签：悬停，
.rating>label:hover~input:checked~label，/*点亮当前选择*/
.rating>输入：选中~label:hover~label{color:#FFED85；}
尝试将事件附加到每个
输入元素：


$（“#评级系统输入”）。单击（函数（）{
log（$（this.val（））；
});
尝试将事件附加到每个
输入元素：


$（“#评级系统输入”）。单击（函数（）{
log（$（this.val（））；
});

当我运行JSFIDLE中提供的代码时，您能提供更多信息吗？我没有问题。你确定页面上没有另一组
input[name=rating]
可能隐藏在其他地方吗？@User987完美，可能是css是一些如何阻止元素的。这个问题我自己也遇到过好几次。@User987我添加了css，现在我得到了这个问题。稍后我会有一个答案帮助您：）我认为伪元素正在混乱中。当我运行JSFIDLE中提供的代码时，您可以提供更多信息吗？我没有问题。你确定页面上没有另一组
input[name=rating]
可能隐藏在其他地方吗？@User987完美，可能是css是一些如何阻止元素的。这个问题我自己也遇到过好几次。@User987我添加了css，现在我得到了这个问题。我马上会有一个答案来帮助你：）我认为伪元素正在搞乱