jQuery + Bootstrap，复选框按钮组和选择多个输入，提交到表单

Question

这是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() 和 .trigger() 。然后，如果检查“活动”，则添加一个选定的，否则删除选定的。但是在单击/打开/触发完成之前，按钮不会切换到“.active”。

我不在乎你改变了什么，但要求：

• 按钮需要包含动态图像和文本（这就是为什么我不 使用复选框。）
• 并且结果需要能够提交到表单。

最终它将使用 php laravel 作为内容。

---

基本上，如果在顶部按下按钮，并且类“活动”...

那么对应的select选项应该有'selected'属性

---

或者...只是一种将一组带有动态图像的独立切换按钮提交到表单的方法。

Answer 1

哦，我喜欢 Kalley 的回答，这就是我得到的。

<script>
$(function() {

        $("#btn‬Group 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="btn‬Group">
    <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>

Answer 2

所以，像这样fiddle：

$(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();
     });
 });

Answer 3

我使用此处描述的方法解决了它，尝试使用 select 是一个糟糕的决定。答案来源：

• <button type="button"> used as form value on submit

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?ID1=ID1&ID2=ID2，而我希望得到.html?users=ID1+ID2+ID3