html表单中的优先级字段 [英] Priority field in html form

问题描述

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

I need to create a priority field in my HTML form. Currently i am using radio buttons but it does not suffice my needs. The radio button should change background color onclick depending on the level of priority. Also i am not able to read the values to the controller.

优先级字段应根据上述矩阵更改颜色。在表单中，只有第一行显示为优先级字段。
这是我优先使用的HTML

The priority field should change colors according to the matrix above. In the form only the first row is present for the priority field. This is the HTML i am using for priority

`       <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">`

$ b b

我使用spring MVC框架。

I am using spring MVC framework.

任何帮助将不胜感激。

推荐答案

href =http://jsfiddle.net/PsmwN/8/ =nofollow> FIDDLE

UPDATE: updated FIDDLE

添加值属性添加到

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

然后一些脚本读取单选按钮值如下：

then some script to read the radio button values like:

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

我尝试了一些解决方法，为了改变颜色在这小提琴

I've tried some workaround for the sake of "changing color" in this Fiddle

添加了此html，用作单选按钮更改颜色：

Added this html, to act as the radio buttons that changes color:

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

使用此css，在单选按钮下：

with this css, to take it under the radio buttons:

.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 divs。现在，您可以使用一些脚本相应地更改 .circ divs的颜色。

Then add z-index: 9 to the radio button css rule to make it stay on top of the .circ divs and be clickable. Finally, add opacity: 0 to make it invisible, so the .circ divs under will appear on screen. Now you can change the color of the .circ divs accordingly using some script.

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

PS: You can't just edit radio button's background color, instead use background images

这篇关于html表单中的优先级字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！