为什么无论选择什么选项，我的 HTML 单选按钮都会检查最后一个选项？

Question

我正在处理一个表单，并且我使用星号和拇指而不是标准的单选按钮来为我的表单增添趣味。我给了input[type=radio] 一个display:none;，然后安装了一些jQuery 来检查之前的单选按钮是否有任何星号/拇指被点击。我通过关闭display: none; 确保这有效，并在我单击星号/拇指时看到正确的按钮被突出显示。表单上的所有内容都已填写完毕，并且我的表单验证 jQuery 有效，但是当我使用一些 PHP 检查表单值（打印 $_POST 值）时，我意识到我的星号/拇指字段的单选按钮不是t 返回正确的值。

对于星域，有 5 颗星，代表值 1 - 5。自然。但是，无论单击哪个星，表单都会返回值 5。好吧，除了最后一个星字段之外的所有字段由于某种原因将返回正确的值。这对我来说没有意义，因为这些字段是在编码时复制/粘贴的。代码应该/是准确的。我已经运行了 5 次测试，每次都点击相同的星星。每次除了最后一颗星之外的每颗星都返回 5 的值，而我的拇指返回值 no，即使单击“是”拇指也是如此。

这是我的jsFiddle

这是屏幕的样子，选中了一些星星，并选中了拇指。

这是另一张图片，其中显示了单选按钮，以证明正在检查正确的按钮。

还有 PHP print_r 用于 $_POST 数组和结果

这到底是怎么回事？

HTML

<div class="r-form">
<div>
<div class="thumbs">
<label name="thumbs">Would you recommend this host?</label>
<input type="radio" id="thumbs" name="thumbs" value="yes">
<img class="thumb_r" src="/imgs/thumbs-up-green.png">
<input type="radio" id="thumbs" name="thumbs" value="no">
<img class="thumb_r" src="/imgs/thumbs-down-red.png">
</div>
<div class="star-chart">
<table>
<tr id="features">
<td><lable name="features">Features</lable></td>

<td class="star-row"><input type="radio" id="features" name="features" value="1">
<img class="star star-1" src="/imgs/star-grey-empty.png">

<input type="radio" id="features" name="features" value="2">
<img class="star star-2" src="/imgs/star-grey-empty.png">

<input type="radio" id="features" name="features" value="3">
<img class="star star-3" src="/imgs/star-grey-empty.png">

<input type="radio" id="features" name="features" value="4">
<img class="star star-4" src="/imgs/star-grey-empty.png">

<input type="radio" id="features" name="features" value="5">
<img class="star star-5" src="/imgs/star-grey-empty.png">
</td>
</tr>  
<tr id="security">
<td><lable name="security">Security</lable></td>

<td class="star-row">
<input type="radio" id="security" name="security" value="1">
<img class="star star-1" src="/imgs/star-grey-empty.png">

<input type="radio" id="security" name="security" value="2">
<img class="star star-2" src="/imgs/star-grey-empty.png">

<input type="radio" id="security" name="security" value="3">
<img class="star star-3" src="/imgs/star-grey-empty.png">

<input type="radio" id="security" name="security" value="4">
<img class="star star-4" src="/imgs/star-grey-empty.png">

<input type="radio" id="security" name="security" value="5">
<img class="star star-5" src="/imgs/star-grey-empty.png">
</td>
</tr>
<tr id="support">
<td><lable name="support">Service</lable></td>

<td class="star-row">
<input type="radio" id="support" name="support" value="1">
<img class="star star-1" src="/imgs/star-grey-empty.png">

<input type="radio" id="support" name="support" value="2">
<img class="star star-2" src="/imgs/star-grey-empty.png">

<input type="radio" id="support" name="support" value="3">
<img class="star star-3" src="/imgs/star-grey-empty.png">

<input type="radio" id="support" name="support" value="4">
<img class="star star-4" src="/imgs/star-grey-empty.png">

<input type="radio" id="support" name="support" value="5">
<img class="star star-5" src="/imgs/star-grey-empty.png">
</td>
</tr>
<tr id="reliability">
<td><lable name="reliability">Reliability</lable></td>

<td class="star-row">
<input type="radio" id="reliability" name="reliability" value="1">
<img class="star star-1" src="/imgs/star-grey-empty.png">

<input type="radio" id="reliability" name="reliability" value="2">
<img class="star star-2" src="/imgs/star-grey-empty.png">

<input type="radio" id="reliability" name="reliability" value="3">
<img class="star star-3" src="/imgs/star-grey-empty.png">

<input type="radio" id="reliability" name="reliability" value="4">
<img class="star star-4" src="/imgs/star-grey-empty.png">

<input type="radio" id="reliability" name="reliability" value="5">
<img class="star star-5" src="/imgs/star-grey-empty.png">
</td>
</tr>
</table>
</div>
</div>

CSS（不确定是否需要，但以防万一）

.r-form {
    width: 100%;
    padding: 10px;
    border: 1px solid grey;
}

.r-form table img {
    display: inline-block;
}

.r-form lable,
.r-form input[type="text"],
.r-form .radio,
.r-form textarea {
    color: #7b7b7b;
}

.r-form lable {
    margin: 10px 15px 10px 0px;
}

.r-form input[type="text"]{
    width: 250px;
    margin: 20px;
    padding: 7px;
    border-radius: 7px;
    border: 1px solid #bbb;
    box-shadow:inset 2px 2px 2px #bbb;
    font-style: italic;
}

.r-form input[type="radio"] {
    margin: 0px 3px;
    width: 20px;
    height: 20px;
    vertical-align: bottom;
    position: relative;
    top: 2px
}

.r-form .star-chart input[type="radio"] {
    display: none;
    width: 10px;
    height: 10px;
}

.r-form textarea {
    width: 80%;
    font-size: 1em;
    padding: 7px;
    text-align: left;
    margin: 10px 0px;
}

.r-form textarea[placeholder] {
    color: #aaa;
}

.r-form table {
    border: 1px solid grey;
    color: #7b7b7b;
    margin: 25px 0px 10px;
    width: 45%
}


.r-form .thumbs {
    border: 1px solid grey;
    width: 45%;
    display: inline-block;
    float: right;
    margin: 0px 5% 0px 0%;
}

.r-form .thumbs lable {
    display: block;
}

.r-form .thumbs input[type="radio"] {
    display: none;
    margin: 0px;
    padding: 0px;
}

.r-form .thumbs img {

    width: 80px;
    height: 80px;
    opacity: .3;
    margin: 10px 5%;

}

.r-form .thumbs img:hover {
    opacity: 1;
}

.r-form .thumbs img.checked {
    opacity: 1;
}

.r-form input[type="submit"] {
    float: right;
    padding: 5px;
    font-size: 1em;
    width: 190px;
}

PHP

$title = htmlspecialchars($_POST["title"]);
$type = htmlspecialchars($_POST["type"]);
$features = htmlspecialchars($_POST["features"]);
$security = htmlspecialchars($_POST["security"]);
$support = htmlspecialchars($_POST["support"]);
$reliability = htmlspecialchars($_POST["reliability"]);
$thumb = htmlspecialchars($_POST["thumbs"]);
$comment = htmlspecialchars($_POST["comment"]);

print_r ($_POST);

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    echo "<br><br>";
    echo "The title of my review is <span class='php'>" . $title . "</span><br>";
    echo "The type of host I am reviewing is <span class='php'>" . $type . " Hosting</span><br>";
    echo "I give FEATURES a rating of <span class='php'>" . $features . "</span><br>";
    echo "I give SECURITY a rating of <span class='php'>" . $security . "</span><br>";
    echo "I give SUPPORT a rating of <span class='php'>" . $support . "</span><br>";
    echo "I give RELIABILITY a rating of <span class='php'>" . $reliability. "</span><br>";
    echo "Will I recommend this host? <span class='php'>" . $thumb . "</span><br>";
    echo "I have the following comments:<br><span class='php'>" . $comment . "</span><br>";

}

编辑添加：

在多次请求包含 jQuery 之后，就在这里。

jQuery

/*-- Variables -->*/
    var $star = $("img.star");
    var $star1 = $(".star-row").children("img.star-1");
    var $star2 = $(".star-row").children("img.star-2");
    var $star3 = $(".star-row").children("img.star-3");
    var $star4 = $(".star-row").children("img.star-4");
    var $star5 = $(".star-row").children("img.star-5");
    var $thumb = $(".thumbs").children("img");

    /*-- when visitor clicks on a star --*/
     $star.click(function(){
         /*alert("I've been clicked!");*/
         $(this).parent().find(".clicked").removeClass(".clicked");
         $(this).nextAll().attr("src", "/imgs/star-grey-empty.png");
         $(this).prev("input[type=radio]").prop("checked", true);


          if( $(this).is($star1) || $(this).is($star2) ) {

            $(this).attr("src", "/imgs/star-red-full.png").addClass(".clicked");
            $(this).prevAll().attr("src", "/imgs/star-red-full.png").addClass(".clicked");

        } else if ( $(this).is($star3) || $(this).is($star4) || $(this).is($star5) ) {

            $(this).attr("src", "/imgs/star-green-full.png").addClass(".clicked");
            $(this).prevAll().attr("src", "/imgs/star-green-full.png").addClass(".clicked");
        }

});

    /*-- when a visitor clicks on a thumb --*/
    $thumb.click(function(){

        $(this).siblings("img").removeClass("checked");
        $(this).addClass("checked");
        $(this).prev("input[type=radio]").prop("checked", true);


    });

Answer 1

您对所有inputs 使用相同的id 属性，因此结果始终是集合中的最后一个。

示例：

<input type="radio" id="features" name="features" value="3">
<input type="radio" id="features" name="features" value="4">

[如 cmets 中所述 - 我最初错误地也包含了 name 属性。单选组中的名称属性应相同。]

后面的代码是检查一个列表 - 就像从左到右阅读一样 - 因为你有两种常见的约定，所以它同时阅读，取最后一个，覆盖并给你最后一个值。

将 id 更改为唯一的，它将解决您的问题。