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

Question

Here's the html code:

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

I dont want it to constantly be running. So I have been trying to call .on() and .click() and .trigger() on the buttons. Which would then if check for "active", then add a selected, else remove selected. But the buttons dont toggle to ".active" until after the click/on/trigger completes.

I dont care what you change, but the requirements:

• button needs to contain dynamic image and text (which is why i'm not using checkbox.)
• and the result needs to be able to submit to a form.

eventually it's going to use php laravel for the content.

---

Basically, if a button is pressed on top, and has the class 'active'...

Then the corresponding select option should have the attribute 'selected'

---

Or... Simply a way to submit a group of separated, toggling buttons with a dynamic image on them, to a form.

Answer 1

I solved it using the method described here, trying to use select was a poor decision. answer source:

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

jsfiddle: http://jsfiddle.net/nQFxU/3/

code

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');
         });
     });
 });

conclusion

This works, it's a lot less hassle, and it's just as easy to put into effect. The downside to this is in my form submit result I have .html?ID1=ID1&ID2=ID2 when I was hoping for .html?users=ID1+ID2+ID3