SayMeIDDQD,
на всякий случай, класс btn-default не нужен.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.btn-default{
background-color: #006400;
}
.btn-primary{
background-color: #FF0000;
}
.btn {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
margin: 5px;
color: #FFFFFF;
text-align: center;
line-height: 50px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("label").on("click", function(event){
event.preventDefault();
$(this).toggleClass("btn-primary btn-default");
$("p").html($(".btn-primary input").serialize())
})
});
</script>
</head>
<body>
<div class="btn-group" role="group">
<label class="btn btn-default">
<input type="hidden" name="rooms[]" value="1">
1
</label>
<label class="btn btn-default">
<input type="hidden" name="rooms[]" value="2">
2
</label>
<label class="btn btn-default">
<input type="hidden" name="rooms[]" value="3">
3
</label>
<label class="btn btn-default">
<input type="hidden" name="rooms[]" value="4">
4+
</label>
</div>
<p></p>
</body>
</html>