如何使用外部按钮检查更改组复选框状态

Question

我正在研究这个片段。如何更改.change点击上的第二个复选框？

$(".change").on("click", function(){
   
});

body{
padding:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> item 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> item 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> item 3
  </label>
</div>
<br />
<br />

  <button type="button" class="btn btn-default change">Item 2</button>

Answer 1

我希望我能正确理解你的问题。

$( '.change' ).on( 'click' , function(){
  /* $( 'label' ).removeClass( 'active' ); */
  $( 'label:nth-child(2)' ).addClass( 'active' );
  /* $( 'input[type="checkbox"]:checked' ).prop( 'checked', false ); */
  $( 'input[type="checkbox"]' )[ 1 ].checked = true;

  console.log( 'Second item is checked: ' + $( 'input[type="checkbox"]' )[ 1 ].checked )
} );

body{
  padding: 30px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> item 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> item 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> item 3
  </label>
</div>
<br />
<br />

  <button type="button" class="btn btn-default change">Button</button>