jQuery checkbox核取方塊操作

antzone發表於2017-03-07
jQuery

核取方塊是比較常用的表單元素，下面就通過一個整合的程式碼例項介紹一下相關的操作。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function (){
  $('#huoqu').click(function(){
    $('#show').html("");
    $("input[name='abc']:checked").each(function(){
      $('#show').append(this.value + "  ");
    });
  });
 
  $('#quanxuan').toggle(function(){
    $("input[name='abc']").attr("checked", 'true');
  }, function (){
    $("input[name='abc']").removeAttr("checked");
  });
 
  $('#fanxuan').click(function (){
    $("input[name='abc']").each(function(){
      if($(this).attr("checked"))
      {
        $(this).removeAttr("checked");
      } 
      else 
      {
        $(this).attr("checked", 'true');
      }
    });
  });
});
</script>
</head>
<body>
<form id="form1" runat="server">
  <div>
    <input type="checkbox" name="abc" value="一年級" id="in1" checked="checked" />
    <label for="in1">一年級</label>
    <input type="checkbox" name="abc" value="二年級" id="in2" />
    <label for="in2">二年級</label>
    <input type="checkbox" name="abc" value="三年級" id="in3" />
    <label for="in3">三年級</label>
    <input type="checkbox" name="abc" value="四年級" id="in4" />
    <label for="in4">四年級</label>
    <input type="checkbox" name="abc" value="五年級" id="in5" />
    <label for="in5">五年級</label>
    <input type="checkbox" name="abc" value="六年級" id="in6" />
    <label for="in6">六年級</label>
    <input type="checkbox" name="abc" value="七年級" id="in7" />
    <label for="in7">七年級</label>
    <input type="checkbox" name="abc" value="八年級" id="in8" />
    <label for="in8">八年級</label>
  </div>
  <br />
  <input type="button" id="quanxuan" value="全選/取消全選" />
  <input type="button" id="fanxuan" value="反選" />
  <input type="button" id="huoqu" value="獲取選中項" />
  <br />
  選中項：
  <div id="show"> </div>
</form>
</body>
</html>

以上程式碼可以對演示了幾種相關操作，程式碼比較簡單，這裡就不多介紹了，可以參閱相關閱讀。

相關閱讀:

1.click事件可以參閱jQuery click事件一章節。

2.html()函式可以參閱jQuery html()一章節。 

3.$("input[name='abc']:checked")可以參閱jQuery [attribute=value]一章節。

4.each()函式可以參閱jQuery each()一章節。 

5.append()函式可以參閱jQuery append()一章節。 

6.toggle()函式可以參閱jQuery toggle()一章節。 

7.attr()函式可以參閱jQuery attr()一章節。 

8.removeAttr()函式可以參閱jQuery removeAttr()一章節， 

相關文章