TShopping

標題: jQuery獲取checkbox選中項等操作及注意事項 [打印本頁]
作者: woff    時間: 2014-3-3 01:26
標題: jQuery獲取checkbox選中項等操作及注意事項
今天在做一個項目功能時需要顯示checkbox選項來讓用戶進行選擇，由於前端不是很熟練，所以做了一個簡單的Demo，其中遇到一些小問題，特記錄下來，希望能幫到遇到類似問題的同學們。

1. 獲取checkbox的選中項

2. checkbox選項的全選 反選操作

用於測試的checkbox代碼段：
  1.         <div>
  2.             <input type="checkbox" name="abc" value="一年級" id="in1" checked="checked" /><label for="in1">一年級</label>
  3.             <input type="checkbox" name="abc" value="二年級" id="in2" /><label for="in2">二年級</label>
  4.             <input type="checkbox" name="abc" value="三年級" id="in3" /><label for="in3">三年級</label>
  5.             <input type="checkbox" name="abc" value="四年級" id="in4" /><label for="in4">四年級</label>
  6.             <input type="checkbox" name="abc" value="五年級" id="in5" /><label for="in5">五年級</label>
  7.             <input type="checkbox" name="abc" value="六年級" id="in6" /><label for="in6">六年級</label>
  8.             <input type="checkbox" name="abc" value="七年級" id="in7" /><label for="in7">七年級</label>
  9.             <input type="checkbox" name="abc" value="八年級" id="in8" /><label for="in8">八年級</label>
  10.         </div>
複製代碼
  1. $("input[name='checkbox'][checked]").each(function () {
  2.           alert(this.value);
  3. })
複製代碼
但在測試時我就遇到了問題，這種方法在IE下可以獲取，但在firefox和chrome瀏覽器下就無法獲取當前的選中項，測試效果如下：
IE下的測試效果（我的是IE10）:
chrome瀏覽器下的效果：
網址：  Jquery 選中多少個input CheckBox問題，IE正常，FF和Chrome無法取到值
  1. //獲取選中項
  2.             $('#huoqu2').click(function () {
  3.                 $('#show').html("");
  4.                 $("input[name='abc']:checked").each(function () {
  5.                     //alert(this.value);
  6.                     $('#show').append(this.value + "  ");
  7.                 });
  8.             });
複製代碼
在chrome下的效果：
二：checkbox的全選 反選操作：
由於這兩個比較簡單，我就直接上代碼吧：
  1. //全選/取消全選
  2.             $('#quanxuan').toggle(function () {
  3.                 $("input[name='abc']").attr("checked", 'true');
  4.             }, function () {
  5.                 $("input[name='abc']").removeAttr("checked");
  6.             });


  9.             //反選
  10.             $('#fanxuan').click(function () {
  11.                 $("input[name='abc']").each(function () {
  12.                     if ($(this).attr("checked")) {
  13.                         $(this).removeAttr("checked");
  14.                     } else {
  15.                         $(this).attr("checked", 'true');
  16.                     }
  17.                 });
  18.             });
複製代碼
再總結一下：
jquery版本在1.3之前時，獲取checkbox的選中項的操作：
  1. $("input[name='abc'][checked]").each(function () {
  2.                     alert(this.value);
  3.                 });
複製代碼
jquery版本在1.3之後時，獲取checkbox的選中項的操作：
  1. $("input[name='abc']:checked").each(function () {
  2.                     alert(this.value);
  3.                 });
複製代碼
附 完整測試Demo代碼：
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head runat="server">
  3.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4.     <title></title>
  5.     <script src="js/jquery-1.7.2.min.js"></script>

  7.     <script>
  8.         $(function () {
  9.             //獲取選中項(FF和chrome下無效)
  10.             $('#huoqu').click(function () {

  12.                 //$("input[name='abc'][checked]").each(function () {
  13.                 //    alert(this.value);
  14.                 //});

  16.                 $('#show').html("");
  17.                 $("input[name='abc'][checked]").each(function () {
  18.                     //alert(this.value);
  19.                     $('#show').append(this.value + "  ");
  20.                 });
  21.             });


  24.             //獲取選中項
  25.             $('#huoqu2').click(function () {
  26.                 $('#show').html("");
  27.                 $("input[name='abc']:checked").each(function () {
  28.                     //alert(this.value);
  29.                     $('#show').append(this.value + "  ");
  30.                 });
  31.             });


  34.             //全選/取消全選
  35.             $('#quanxuan').toggle(function () {
  36.                 $("input[name='abc']").attr("checked", 'true');
  37.             }, function () {
  38.                 $("input[name='abc']").removeAttr("checked");
  39.             });


  42.             //反選
  43.             $('#fanxuan').click(function () {
  44.                 $("input[name='abc']").each(function () {
  45.                     if ($(this).attr("checked")) {
  46.                         $(this).removeAttr("checked");
  47.                     } else {
  48.                         $(this).attr("checked", 'true');
  49.                     }
  50.                 });
  51.             });
  52.         });

  54.     </script>
  55. </head>
  56. <body>
  57.     <form id="form1" runat="server">
  58.         <div>
  59.             <input type="checkbox" name="abc" value="一年級" id="in1" checked="checked" /><label for="in1">一年級</label>
  60.             <input type="checkbox" name="abc" value="二年級" id="in2" /><label for="in2">二年級</label>
  61.             <input type="checkbox" name="abc" value="三年級" id="in3" /><label for="in3">三年級</label>
  62.             <input type="checkbox" name="abc" value="四年級" id="in4" /><label for="in4">四年級</label>
  63.             <input type="checkbox" name="abc" value="五年級" id="in5" /><label for="in5">五年級</label>
  64.             <input type="checkbox" name="abc" value="六年級" id="in6" /><label for="in6">六年級</label>
  65.             <input type="checkbox" name="abc" value="七年級" id="in7" /><label for="in7">七年級</label>
  66.             <input type="checkbox" name="abc" value="八年級" id="in8" /><label for="in8">八年級</label>
  67.         </div>
  68.         <br />
  69.         <input type="button" id="huoqu" value="獲取選中項（FF和chrome下無效）" />
  70.         <input type="button" id="quanxuan" value="全選/取消全選" />
  71.         <input type="button" id="fanxuan" value="反選" />
  72.         <input type="button" id="huoqu2" value="獲取選中項" />
  73.        <br />
  74.         選中項： <div id="show">

  76.         </div>
  77.     </form>
  78. </body>
  79. </html>
複製代碼




歡迎光臨 TShopping (http://www.tshopping.com.tw/) Powered by Discuz! X3.2