Webkit浏览器中的复选框问题

Question

我有很多复选框的html。 一些复选框应取消选中其他复选框组。因此，其中一个复选框具有以下代码。

第一个版本在Jquery中

function uncheckmusic() {
    $(".buttons :checkbox").prop('checked',false);
}

$("#test").click(function() {
    uncheckmusic();
}

另一个版本是在Javascript中`

function uncheckmusic() {
    document.getElementById("first").checked = false;
    document.getElementById("second").checked = false;      
}

$("#test").click(function() {
    uncheckmusic();
}

因此问题如下：在Firefox中，它工作正常，但在Webkit浏览器（例如Chrome）中，存在一些我无法理解的问题。 复选框不返回值或不更新。 请帮我。

<div class="classexample">             
    <input id="test" name="yesmusic" class="toggle"  type="checkbox">                                     
</div>                       

<div class="buttons">                  
      <input id="first" name="checkbox1"  type="checkbox" class="toggle">
      <div id="checkbox1"><b>checkbox1</b></div>
</div>

<div class="buttons">                  
    <input id="second" name="checkbox2"  type="checkbox2" class="toggle">
    <div id="checkbox2"><b>checkbox2</b></div>                        
</div>

Answer 1

这对您有帮助吗，这是FIDDLE 。

<script>
$(function() {

  function uncheckmusic() {
    $('.buttons input[type="checkbox"]').prop('checked',false);
  }

  $('.buttons input[type="checkbox"]').click(function() {
    if($(this).is(':checked')) {
       $('.classexample input[type="checkbox"]').prop('checked',false);
    }
  });

  $('.classexample input[type="checkbox"]').click(function() {
    if($(this).is(':checked')) {
       uncheckmusic();
    }
  });

});
</script>