8

我有一个简单的选择菜单，例如

<p>Would you recommend this company?</p>

<select>
    <option value="yes">Yes</option>
    <option value="no">No</option>
</select>

我要求用户反馈，它目前是由一个简单的表单提交提供的，现在是 2013 年，我很想把它做成 2 个按钮，例如“竖起大拇指”或“竖起大拇指”（选中时突出显示）/可互换（例如可以'不要一次选择2）。

走到这一步......但它并没有真正应用选择值或“选择”效果：

http://jsfiddle.net/mBUgc/18/

我最接近的是以下......它将选择菜单转换为星级...... - 但它并不是真正可用的，所以希望有人可以帮助/指出正确的方向或一个小代码示例。

http://netboy.pl/demo/jquery-bar-rating/examples/

4

3 回答 3

12

更新：

为选择值的表单提交添加了隐藏元素。

http://jsfiddle.net/mBUgc/21/

这是您要实现的目标的简单实现。

演示：http: //jsfiddle.net/mBUgc/19/

JavaScript：

$("select option").unwrap().each(function() {
    var btn = $('<div class="btn">'+$(this).text()+'</div>');
    if($(this).is(':checked')) btn.addClass('on');
    $(this).replaceWith(btn);
});

$(document).on('click', '.btn', function() {
    $('.btn').removeClass('on');
    $(this).addClass('on');
});

CSS：

div.btn {
    display: inline-block;
    /** other styles **/
}
div.btn.on {
    background-color: #777;
    color: white;
    /** styles as needed for on state **/
}

注意：无论您选择的选项数量如何，这都会起作用 - http://jsfiddle.net/mBUgc/20/

于 2013-09-21T10:57:04.357 回答
7

如果有人回到这个问题，我会根据@techfoobar 的示例提出一个稍微不同的解决方案。

基本上： - 动态代码（可用于同一页面上的多个选择） - 不需要隐藏字段，选择仍然存在（隐藏）

测试： - 当前 chrome、firefox、edge（铬）、ie11

用法：

jQuery(document).ready(function($) {
  ReplaceSelectWithButtons($('#test'));
});

https://jsfiddle.net/koshimon/pobcvxf4/2/

// 是的，这是我在这里的第一篇文章，欢迎反馈 :)

于 2020-03-24T14:59:26.117 回答
2

不过，你不需要 jQuery 来做这件事。有一个非常简单的解决方案。
此代码片段仅使用输入和标签标签，我们隐藏单选按钮圆圈并使用按钮代替

<input type="radio" name="name_name" id="id_name" value="1" style="visibility: hidden;">
<label class="btn btn-primary" for="id_name">1</label>
<input type="radio" name="name_name" id="id_name2" value="2" style="visibility: hidden;">
<label class="btn btn-primary" for="id_name2">2</label>


input[type=radio]:checked + label {
  font-style: normal;
  color: rgb(56,110,246);
  border: 1px solid rgb(56,110,246);
  background-color: rgb(226,233,253)
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<input type="radio" name="name_name" id="id_name" value="1" style="visibility: hidden;">
<label class="btn btn-secondary" for="id_name" style="border: 1px solid grey;">1</label>
<input type="radio" name="name_name" id="id_name2" value="2" style="visibility: hidden;">
<label class="btn btn-secondary" for="id_name2" style="border: 1px solid grey;">2</label>

于 2020-12-12T19:31:54.407 回答