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

标签 php jquery html css forms

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

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

这是我的 jsFiddle

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

这是另一张图片，显示单选按钮以证明正在选中正确的按钮。 enter image description here

$_POST 数组和结果的 PHP print_r enter image description here

这到底是怎么回事？

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


    });

最佳答案

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

示例:

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

[如评论中所述 - 我最初错误地也包含了 name 属性。 name属性在同一个单选组中应该是一样的。]

后面的代码正在检查列表 - 就像从左到右阅读 - 因为你有两个共同的约定，它会读取两个，取最后一个，覆盖并给你最后一个值。

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

关于php - 为什么我的 HTML 单选按钮会检查最后一个选项，而不管选择了什么选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36345760/

上一篇：html - 在两个表格行之间居中放置一个按钮

下一篇：html - 为什么我的链接在 HTML 中堆叠在一起

相关文章：

symfony2.8 的 php_apcu.dll 扩展推荐 xampp 上的 php 加速器

javascript - 没有获得对我的 php 页面的 ajax 查询的成功回调

javascript - 如何在php中将上传的文件发送到电子邮件

javascript - 将同一线性方程的所有直线分组

Javascript Animate ScrollTop 跳转到窗口顶部，然后跳到底部

javascript - 通过触发输入焦点打开 iOS 键盘

javascript - Bootstrap 向导/步骤表单

javascript - 如何在速度模板的 for 循环内为 div 生成唯一的类名？

php - 我如何在 PHP 中设置一个 id 列

android - 在 HTML 中实现水平制表符

©2024 IT工具网  联系我们