Question

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

对于星场，有5颗星，代表值1-5。当然。但是，无论点击什么星形，表单都会返回值5.好吧，除了最后一个星形字段之外的所有字段由于某种原因，它将返回正确的值。这对我来说没有意义，因为这些字段在编码时被复制/粘贴。代码应该是/确切的。我已经进行了5次测试，每次点击所有相同的星星。每次除了最后一个星之外的每个星都返回值5，并且我的拇指返回值no，即使＆＃34;是＆＃34;点击拇指。

这是我的jsFiddle

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

这是另一张图片，单选按钮显示正在检查右键。

print_r数组和结果的PHP $_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

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

示例：

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

[详见评论 - 我最初错误地包含了name属性。广播组中的name属性应该相同。]

背后的代码是检查列表 - 比如从左到右阅读 - 因为你有两个常见的约定，它正在读取两个，取最后一个，覆盖并给你最后一个值。

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

为什么我的HTML单选按钮会检查最后一个选项而不管选择了哪个选项？

1 个答案: