实现全选

时间:2019-11-26 15:58来源:澳洲幸运10展示
jquery 完毕全选,反选,全不选等效用,下边直接以例子实行验证。 设页面有如下黄金年代组复选框和多少个有关开关(全选,反选,全不选等卡塔尔: input type="checkbox" name="fruit" valu

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

澳洲幸运10全天精准计划,专心运用 jquery 此前务须求引进 jquery 包哦!

您也许感兴趣的稿子

  • 取缔网页右键、复制、另存为、查看源文件等效率达成网页源代码尊敬
  • javascript剖断鼠标左右键点击-包容ie、firefox、chrome等各大主流浏览器
  • Fck艾德itor增多右键菜单-图片删除功能
  • javascript实现截取字符串作用总括(包含采纳Js截取普通话字符的介绍)
  • 运转代码预览代码,代码另存为,复制代码功能的达成
  • js屏蔽鼠标键盘事件(包罗鼠标右键,方向键,退格键,F5刷新键等),宽容IE和firefox
  • 选用js禁绝浏览器直接选用复制小说内容的艺术
  • javascript判断复选框是不是选中

达成全选,反选,全不选等效果,上边直接以例子进行验证。 设页面犹如下后生可畏组复选框和多少个相关开关(全选,反选,全不选等卡塔尔国:...

编辑:澳洲幸运10展示 本文来源:实现全选

关键词: