html表单中的优先级字段

Question

我需要在我的 HTML 表单中创建一个优先级字段。目前我正在使用单选按钮，但它不能满足我的需要。单选按钮应根据优先级更改单击时的背景颜色。我也无法读取控制器的值。

优先级字段应该根据上面的矩阵改变颜色。在表单中，优先级字段仅存在第一行。 这是我用于优先级的 HTML

`       <input type="radio" id="1" class="priority">
        <input type="radio" id="2" class="priority">
        <input type="radio" id="3" class="priority">
        <input type="radio" id="4" class="priority">
        <input type="radio" id="5" class="priority">`

我正在使用 Spring MVC 框架。

任何帮助将不胜感激

Answer 1

更新：更新FIDDLE

将value 属性添加到单选按钮

<input type="radio" name="1" id="r1" value="a rating">

然后是一些脚本来读取单选按钮的值，例如：

var htmlStr = $(this).attr("value");
$(".indicator").html(htmlStr); 

为了在这个Fiddle中“改变颜色”，我尝试了一些解决方法

添加了这个 html，作为改变颜色的单选按钮：

<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>
<div class="circ"></div>

用这个css，把它放在单选按钮下：

.circ{
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: gray;
    display: inline-block;
    position: relative;
    bottom: 20px;
    margin-left: 5px;
    margin-right: 4px;
}

然后将z-index: 9 添加到单选按钮css 规则中，使其保持在.circ div 的顶部并且可以点击。最后添加opacity: 0使其不可见，这样.circ下面的div就会出现在屏幕上。现在您可以使用一些脚本相应地更改.circ div 的颜色。

PS：你不能只编辑单选按钮的背景颜色，而是使用背景图片

Answer 2

我不确定我是否正确理解了您的问题，但如果是这样，demo code (jsfiddle) 可能会有所帮助。 （它只是一个演示，仍然需要根据您的需要进行调整）

它只是为每个 RadioButton 的 Click 事件设置颜色类。

CSS

.color1 {
    background:red;
}
.color2 {
    background:green;
}
.color3 {
    background:yellow;
}

HTML

<div class="priority">
    <input type="radio" name="1" id="1">
    <input type="radio" name="1" id="2">
    <input type="radio" name="1" id="3">
    <input type="radio" name="1" id="4">
    <input type="radio" name="1" id="5">
</div>

脚本

$(function () {
    $(".priority input").on("click", function () {
        $(".priority").attr("class", "priority color" + this.id);
    });
})

已通过 Chrome 34+ 测试

Answer 3

根据您的要求，您可以使用 jQuery 插件 多彩评分系统。它带有很好的选项，因此您可以根据需要设置颜色。

DEMO

示例如下：

HTML

<ul id="rating">
   <li><a href="#">This is just a piece of crap</a></li>
   <li><a href="#">Nothing too new or interesting</a></li>
   <li><a href="#">Not bad, I like it</a></li>
   <li><a href="#">I would like to see more of this</a></li>
   <li><a href="#">This is the best thing I've seen</a></li>
</ul>

CSS

#rating { list-style:none; }
#rating li { display:inline; float:left; }
#rating li a { display:block; width:80px; height:80px; border:1px solid #888; background-color:#333;
   text-indent:-9999px; box-shadow:0 0 5px #888; border-radius:40px; }

#ratinginfo { clear:left; width:350px; }
#ratinginfo p { text-align:center; padding:10px;
   box-shadow:0 0 5px #888; border-radius:40px; }

在我们加载完 jQuery 和 Color 插件之后，我们就可以使用 jQuery 将圆圈设置为正确的颜色并显示文本了。

// Variable to set the duration of the animation
var animationTime = 500;

// Variable to store the colours
var colours = ["bd2c33", "e49420", "ecdb00", "3bad54", "1b7db9"];

// Add rating information box after rating
var ratingInfobox = $("<div />")
   .attr("id", "ratinginfo")
   .insertAfter($("#rating"));

// Function to colorize the right ratings
var colourizeRatings = function(nrOfRatings) {
   $("#rating li a").each(function() {
      if($(this).parent().index() <= nrOfRatings) {
         $(this).stop().animate({ backgroundColor : "#" + colours[nrOfRatings] } , animationTime);
      }
   });
};

// Handle the hover events
$("#rating li a").hover(function() {

   // Empty the rating info box and fade in
   ratingInfobox
      .empty()
      .stop()
      .animate({ opacity : 1 }, animationTime);

   // Add the text to the rating info box
   $("<p />")
      .html($(this).html())
      .appendTo(ratingInfobox);

   // Call the colourize function with the given index
   colourizeRatings($(this).parent().index());
}, function() {

   // Fade out the rating information box
   ratingInfobox
      .stop()
      .animate({ opacity : 0 }, animationTime);

   // Restore all the rating to their original colours
   $("#rating li a").stop().animate({ backgroundColor : "#333" } , animationTime);
});

// Prevent the click event and show the rating
$("#rating li a").click(function(e) {
   e.preventDefault();
   alert("You voted on item number " + ($(this).parent().index() + 1));
});

完整的文档和源代码点击HERE