基於jquery實作複選框全選，反選，全不選等功能

jquery 實現全選，反選，全不選等功能，以下直接以範例進行說明。設頁有以下一組複選框與幾個相關按鈕（全選，反選，全不選等）：

<input type="checkbox" name="fruit" value="apple" />苹果
<input type="checkbox" name="fruit" value="orange" />橘子
<input type="checkbox" name="fruit" value="banana" />香蕉
<input type="checkbox" name="fruit" value="grape" />葡萄
  
<input type="button" id="btn1" value="全选">
<input type="button" id="btn2" value="全不选">
<input type="button" id="btn3" value="反选">
<input type="button" id="btn4" value="选中所有奇数">
<input type="button" id="btn5" value="获得选中的所有值">

   

則分別實現相關功能的完整程式碼如下：

$(function(){
  $('#btn1').click(function(){//全选
    $("[name='fruit']").attr('checked','true');
  });
  $('#btn2').click(function(){//全不选
    $("[name='fruit']").removeAttr('checked');
  });
  $('#btn3').click(function(){//反选
    $("[name='fruit']").each(function(){
      if($(this).attr('checked')){
        $(this).removeAttr('checked');
      }else{
        $(this).attr('checked','true');
      }
    })
  });
  $("#btn4").click(function(){//选中所有奇数
    $("[name='fruit']:even").attr('checked','true');
  })
  $("#btn5").click(function(){//获取所有选中的选项的值
    var checkVal='';
    $("[name='fruit'][checked]").each(function(){
      checkVal+=$(this).val()+',';
    })
    alert(checkVal);
  })
});

   注意使用jquery 之前必須要引入jquery 包哦！

以上就是小編辛苦整理的程式碼，是不是用起來很方便，希望能夠幫到大家。

更多基於jquery實現複選框全選，反選，全不選等功能相關文章請關注PHP中文網！