以下是html代码:
<Div>
<Div #btn-group>
<button value=0><img />Foo</button>
<button value=1 class=active><img />Lor</button>
<button value=2 class=active><img />Bar</button>
<button value=3><img />Ips</button>
</div>
<select hidden multiple>
<option value=0>
<option value=1 selected>
<option value=2 selected>
<option value=3>
</select>
</div>
http://jsfiddle.net/n6ns4/5/
我不希望它一直在运行。所以我一直在尝试调用按钮上的.on()、.click()和.triger()。如果选中"活动",则添加选定项,否则删除选定项。但是,在点击/打开/触发完成之前,按钮不会切换到".active"。
我不在乎你改变什么,但要求:
- 按钮需要包含动态图像和文本(这就是为什么我没有使用复选框。)
- 并且结果需要能够提交到表格中
最终,它将使用php-laravel作为内容。
基本上,如果在顶部按下一个按钮,并且类"活动"。。。
然后相应的选择选项应具有属性"选定"
或者。。。这只是一种将一组带有动态图像的分离、切换按钮提交到表单的方法。
哦,我喜欢Kalley的答案,这就是我得到的。
<script>
$(function() {
$("#btnGroup button").click(function(){
var $thisButton = $('#btnGrouSelect option[value'+$(this).attr('value')+']');
if($(this).hasClass('active')){
$(this).removeClass('active');
if($thisButton.is(':selected')){} else {$thisButton.prop("selected", false)}
} else {
$(this).addClass('active');
if($thisButton.is(':selected')){} else { $thisButton.prop("selected", true)}
}
//$thisValue = $(this).attr('value');
})
});
// BEGIN: jQuery functions on load
</script>
<Div>
<Div id="btnGroup">
<button value=0>[img0] 0</button>
<button value=1>[img1] 1</button>
<button value=2>[img2] 2</button>
<button value=3>[img3] 3</button>
</div>
<select multiple id="btnGrouSelect">
<option value=0>0</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<input type="submit">
</div>
所以,像这样的小提琴:
$(document).ready(function () {
$('div.partnerBtnGroup button').on('click', function (ev) {
var btn = $(this).toggleClass('active');
var uid = btn.prop("value");
$("select option[value='" + uid + "']").prop('selected', btn.hasClass('active'));
$('pre').html(JSON.stringify($('#partnersSelect').val()));
ev.stopPropagation();
});
});
我使用这里描述的方法解决了这个问题,尝试使用select是一个糟糕的决定。答案来源:
- <按钮类型=";按钮">在提交时用作表单值
jsfiddle:http://jsfiddle.net/nQFxU/3/
代码
HTML
<div id="btn-group">
<button type="button" data-name="uid0" class="btn" data-toggle="btn-input" data-target="#puBtn0" value="uid0">
<img src="http://placehold.it/50">
<br>Randy</button>
<input type="hidden" id="puBtn0" />
<button type="button" data-name="uid1" class="btn" data-toggle="btn-input" data-target="#puBtn1" value="uid1">
<img src="http://placehold.it/50">
<br>Dick</button>
<input type="hidden" id="puBtn1" />
<button type="button" data-name="uid2" class="btn" data-toggle="btn-input" data-target="#puBtn2" value="uid2">
<img src="http://placehold.it/50">
<br>Jane</button>
<input type="hidden" id="puBtn2" />
<button type="button" data-name="uid3" class="btn" data-toggle="btn-input" data-target="#puBtn3" value="uid3">
<img src="http://placehold.it/50">
<br>Alice</button>
<input type="hidden" id="puBtn3" />
<button type="button" data-name="uid4" class="btn" data-toggle="btn-input" data-target="#puBtn4" value="uid4">
<img src="http://placehold.it/50">
<br>John</button>
<input type="hidden" id="puBtn4" />
</div>
JS
$(document).ready(function () {
$('[data-toggle="btn-input"]').each(function () {
var $this = $(this);
var $input = $($this.data('target'));
var name = $this.data('name');
var active = false; // Maybe check button state instead
$this.on('click', function () {
active = !active;
if (active) $input.attr('name', name).val($this.val());
else $input.removeAttr('name').removeAttr('value');
$this.button('toggle');
});
});
});
结论
这很有效,麻烦少了很多,而且也很容易实施。这样做的缺点是在我的表单提交结果中,当我希望.html?users=ID1+ID2+ID3
时,我有.html?ID1=ID1&ID2=ID2