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.             });


  7.             //反選
  8.             $('#fanxuan').click(function () {
  9.                 $("input[name='abc']").each(function () {
  10.                     if ($(this).attr("checked")) {
  11.                         $(this).removeAttr("checked");
  12.                     } else {
  13.                         $(this).attr("checked", 'true');
  14.                     }
  15.                 });
  16.             });
複製代碼
再總結一下:
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>

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

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

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


  19.             //獲取選中項
  20.             $('#huoqu2').click(function () {
  21.                 $('#show').html("");
  22.                 $("input[name='abc']:checked").each(function () {
  23.                     //alert(this.value);
  24.                     $('#show').append(this.value + "  ");
  25.                 });
  26.             });


  27.             //全選/取消全選
  28.             $('#quanxuan').toggle(function () {
  29.                 $("input[name='abc']").attr("checked", 'true');
  30.             }, function () {
  31.                 $("input[name='abc']").removeAttr("checked");
  32.             });


  33.             //反選
  34.             $('#fanxuan').click(function () {
  35.                 $("input[name='abc']").each(function () {
  36.                     if ($(this).attr("checked")) {
  37.                         $(this).removeAttr("checked");
  38.                     } else {
  39.                         $(this).attr("checked", 'true');
  40.                     }
  41.                 });
  42.             });
  43.         });

  44.     </script>
  45. </head>
  46. <body>
  47.     <form id="form1" runat="server">
  48.         <div>
  49.             <input type="checkbox" name="abc" value="一年級" id="in1" checked="checked" /><label for="in1">一年級</label>
  50.             <input type="checkbox" name="abc" value="二年級" id="in2" /><label for="in2">二年級</label>
  51.             <input type="checkbox" name="abc" value="三年級" id="in3" /><label for="in3">三年級</label>
  52.             <input type="checkbox" name="abc" value="四年級" id="in4" /><label for="in4">四年級</label>
  53.             <input type="checkbox" name="abc" value="五年級" id="in5" /><label for="in5">五年級</label>
  54.             <input type="checkbox" name="abc" value="六年級" id="in6" /><label for="in6">六年級</label>
  55.             <input type="checkbox" name="abc" value="七年級" id="in7" /><label for="in7">七年級</label>
  56.             <input type="checkbox" name="abc" value="八年級" id="in8" /><label for="in8">八年級</label>
  57.         </div>
  58.         <br />
  59.         <input type="button" id="huoqu" value="獲取選中項(FF和chrome下無效)" />
  60.         <input type="button" id="quanxuan" value="全選/取消全選" />
  61.         <input type="button" id="fanxuan" value="反選" />
  62.         <input type="button" id="huoqu2" value="獲取選中項" />
  63.        <br />
  64.         選中項: <div id="show">

  65.         </div>
  66.     </form>
  67. </body>
  68. </html>
複製代碼





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