如何在jQuery中定位未选中的复选框?

时间:2016-12-19 09:00:04

标签: javascript jquery

当我取消选中任何复选框时,它也会附加结果。我想删除它。我该怎么办?

$(document).ready(function(){
    $('.chk_val').on('click',function(){
        var result = $(this).val();
        $('#course').append(result);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
<span id="course"> </span>
</div>

<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />

1 个答案:

答案 0 :(得分:2)

&#13;
&#13;
$(document).ready(function() {
  $('.chk_val').on('click', function() {
    var result = $('.chk_val:checked').map(function() {

      return $(this).val()
    }).get();
    $('#course').html(result);


  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show">
  <span id="course"> </span>
</div>

<input type="checkbox" class="chk_val" value="20" />20
<br />
<input type="checkbox" class="chk_val" value="30" />30
<br />
<input type="checkbox" class="chk_val" value="40" />40
<br />
&#13;
&#13;
&#13;

  1. 映射已检查项目的值。
  2. 使用.html()更改div的html