JSFiddle - React, Tailwind, and code Playground
HTML
<div class="span9">
<div class="row-fluid">
<div id="AlertSent" class="span12">
<label>alert.sent:</label>
<input type="checkbox" class="chk" checked="checked">
</div>
</div>
<div class="row-fluid">
<div id="AlertNotSent" class="span12">
<label>alert.not.sent:
</label>
<input type="checkbox" class="chk" checked="checked">
</div>
</div>
<div class="row-fluid">
<div id="AlertInProgress" class="span12">
<label>alert.in.progress:
</label>
<input type="checkbox" class="chk" checked="checked">
</div>
</div>
</div>
<input type="button" value="Resend" class="toggle">
JavaScript
$(document).ready(function(){
$(".chk").prop("checked","checked");
$(".chk").css('display','none');
$(".toggle").click(function(){
$(".chk").css('display','block');
$(".chk").prop("checked",false);
$(this).val("Done");
});
$(".chk").change(function(){
var all = $(".chk").length;
var chked = $(".chk").not(":checked").length;
if(all == chked){
$(".chk").css('display','none');
$(".toggle").val("Resend");
}
})
});