How can I update the state of radio buttons to match carousel status?

I use radio buttons like a pagination for my carousel, which works fine. If I change the slide using the carousel buttons instead of the radio buttons, the state of the radio buttons doesn't change, so the selected button doesn't match the selected slide. How can I fix this? Here is my template HTML: <div class="container"> <div id="carousel" class="carousel slide" data-interval="false" data-ride="carousel"> <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_chania.jpg"> </div> <div class="item"> <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_chania2.jpg"> </div> <div class="item"> <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_flower.jpg"> </div> <div class="item"> <img class="img-responsive center-block" src="http://www.w3schools.com/bootstrap/img_flower2.jpg"> </div> </div> <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <br> <center> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active s1"><input type="radio" name="options" autocomplete="off" checked>1</label> <label class="btn btn-primary s2"><input type="radio" name="options" autocomplete="off">2</label> <label class="btn btn-primary s3"><input type="radio" name="options" autocomplete="off">3</label> <label class="btn btn-primary s4"><input type="radio" name="options" autocomplete="off">4</label> </div> </center> JS: $(function () { $(".s1").click(function () {$("#carousel").carousel(0);}); $(".s2").click(function () {$("#carousel").carousel(1);}); $(".s3").click(function () {$("#carousel").carousel(2);}); $(".s4").click(function () {$("#carousel").carousel(3);}); });