JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.no-responsive.no-icons.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="container" id="choices">
<span>C</span>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-mini" value="C">Yes</button>
<button type="button" class="btn btn-mini" value="C">No</button>
</div>
<span>A</span>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-mini" value="A">Yes</button>
<button type="button" class="btn btn-mini" value="A">No</button>
</div>
<span>B</span>
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-mini" value="B">Yes</button>
<button type="button" class="btn btn-mini" value="B">No</button>
</div>
</div>
<div class="result">
<p>Yes: <span id="yes"></span></p>
<p>No: <span id="no"></span></p>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 10%;
}
.result {
width: 100%;
height: 20%;
}
JavaScript
$("#choices").on("click", "button", function(e) {
var clicked = $(this);
var active = $("#choices").find(".active");
var yes = [];
var no = [];
var found = false;
active.each(function() {
var btn = $(this);
if (btn.attr("value") === clicked.attr("value")) {
if (btn.text() === clicked.text()) {
found = true;
}
} else {
if (btn.text() === "Yes") {
yes.push(btn.attr("value"));
} else {
no.push(btn.attr("value"));
}
}
});
if (!found) {
if (clicked.text() === "Yes") {
yes.push(clicked.attr("value"));
} else {
no.push(clicked.attr("value"));
}
}
$("#yes").text(yes.join(", "));
$("#no").text(no.join(", "));
});