jQuery ButtonSet Refresh not working

Question

HTML

<div id="test">    
    <input type="checkbox" id="check1" class="checkall"/><label for="check1">1</label>
    <input type="checkbox" id="check2" class="checkall"/><label for="check2">2</label>
    <input type="checkbox" id="check3" class="checkall"/><label for="check3">3</label>
</div>
<br>
<input type="button" id="selectall" value="Select All">

jQuery

$("#test").buttonset();
$("#selectall").button();
    $("#selectall").toggle(
          function () { $("#test .checkall").prop("checked", true).buttonset("refresh"); },
          function () { $("#test .checkall").prop("checked", false).buttonset("refresh"); }
      );

I want to select all button is clicked. But it does not change visually. I'd appreciate if you help.

Demo: http://jsfiddle.net/fenerama/zv8e4/

Answer 1

Buttonset is not the appropriate method to call in this case. You need to use button method instead

http://jsfiddle.net/zv8e4/3/

$("#selectall").toggle(
      function () { $("#test .checkall").prop("checked", true).button("refresh"); },
      function () { $("#test .checkall").prop("checked", false).button("refresh"); }
  );