在HTML表单优先级字段(Priority field in html form)

我需要在我的HTML表单创建一个优先级字段。 目前我使用的单选按钮，但它并不足够我的需要。 单选按钮应该改变背景颜色根据优先级别的onclick。 另外我不能够读取该值到控制器。

优先级字段应当根据上面的矩阵改变颜色。 形式仅第一行是本作的优先级字段。 这是我使用的优先级的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); 

我已经尝试了一些解决方法“改变颜色”在这个缘故小提琴

加入这个网站，作为改变颜色的单选按钮：

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

我不知道如果我understud你的问题是正确的，但如果这样这个演示代码（的jsfiddle）可能的帮助。 （它只是一个演示，并且仍然必须适应您的需求）

它只是设置在每个单选按钮的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和颜色插件后，我们已经准备好使用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));
});

完整的文档和源代码，请点击这里

文章来源: Priority field in html form