验证并捕获选定的按钮组复选框

Question

i am using bootstrap button-group checkbox with toggle. To easily identify selected option, using the toggle function (courtesy - one of the post here). Working example here.

<div class="form-group">
<label class="sr-only" for="Test">Boxes</label>
<div class="controls" name="Test"> 
<div class="btn-group" data-toggle="buttons-checkbox">
<div class="btn btn-default" class-toggle="btn-info">AA</div>
<div class="btn btn-default" class-toggle="btn-info">BB</div>
<div class="btn btn-default" class-toggle="btn-info">CC</div>
</div>
</div>
</div>

stumped with:

1) how to validate that user has to select at least 1 button and 2) how to capture value(s) of selected buttons to be sent to PHP (form).

very novice with web development. Need help. Thanks.

Answer 1

Suppose you have three buttons as shown below:

<input type="button" class="button" value="Button1">
<input type="button" class="button" value="Button2">
<input type="button" class="button" value="Button3">

You can make a hidden field there with an array as given below:

<input type="hidden" class="newField" name="buttonValue[]">

Now, use it in Jquery:

$(document).ready(function(){
    $('.button').click(function(){
        var values = $(this).val();
        $('.hidden').val(values);
    });
});

and now when you submit a form then you can easily get value from that field and make a validation accordingly.