复选框的一下额操作|全选 取消全选 反选 选中值
2016-09-22 11:37
211 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>louis-blog >> jQuery 对checkbox的操作</title> <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.slim.js"></script> <SCRIPT LANGUAGE="JavaScript"> <!-- $("document").ready(function(){ $("#btn1").click(function(){ $("[name='checkbox']").attr("checked",'true');//全选 }) $("#btn2").click(function(){ $("[name='checkbox']").removeAttr("checked");//取消全选 }) $("#btn3").click(function(){ $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数 }) $("#btn4").click(function(){ $("[name='checkbox']").each(function(){//反选 if($(this).attr("checked")){ $(this).removeAttr("checked"); } else{ $(this).attr("checked",'true'); } }) }) $("#btn5").click(function(){//输出选中的值 var str=""; $("[name='checkbox'][checked]").each(function(){ str+=$(this).val()+"/r/n"; //alert($(this).val()); }) alert(str); }) }) --> </SCRIPT> </HEAD> <body style="text-align:center;margin: 0 auto;font-size: 12px;" mce_style="text-align:center;margin: 0 auto;font-size: 12px;"> <div style="border: 1px solid #999; width: 500px; padding: 15px; background: #eee; margin-top: 150px;"> <form name="form1" method="post" action=""> <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="获得选中的所有值"> <br /><br /> <input type="checkbox" name="checkbox" value="checkbox1"> checkbox1 <input type="checkbox" name="checkbox" value="checkbox2"> checkbox2 <input type="checkbox" name="checkbox" value="checkbox3"> checkbox3 <input type="checkbox" name="checkbox" value="checkbox4"> checkbox4 <input type="checkbox" name="checkbox" value="checkbox5"> checkbox5 <input type="checkbox" name="checkbox" value="checkbox6"> checkbox6 </form> </div> </body> </HTML>
相关文章推荐
- jQuery——选中、不选中、全选、取消全选等复选框操作
- JS复选框checkbox:父复选框全选全取消子选框和子选框选则而父选框自动选中的代码
- 全部选中和删除选中商品的实现,点击一下全选,点击两下取消全选
- jquery操作复选框全选反选选中 1.9与1.8区别
- jquery 循环获取checkBox的值,以及对复选框选中,取消,操作按钮
- jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等
- 复选框全选、取消全选、反选操作
- 选中表格中相应行的复选框,点击下面的“删除”按钮可以删除相应的行,选中下面的"全选"复选框,则所有行的复选框全部选中,取消则全部取消。 鼠标移动到封面上在旁边显示大图,鼠标移开,大图消失
- Jquery 操作复选框 全选,判断是否选中等
- js全选,全选以后,如果选中其中一个,全选效果取消,如果复选框全部选中,全选按钮自动也被选中
- jquery 复选框全选/全不选切换 普通DOM元素点击选中/取消选中切换
- jquery checkbox 复选框多次点击判断选中状态,以及全选/取消的代码示例
- jquery操作复选框全选反选选中 1.9与1.8区别
- jquery 循环获取checkBox的值,以及对复选框选中,取消,操作按钮
- Ext 没有全选取消复选框选中状态
- jquey操作checkbox,全选,单击,获取值,单击文字选中复选框
- javascript实现复选框全选/全不选,与asp删除选中的相应记录
- JQUERY复选框CHECKBOX全选,取消全选
- 通过JS将复选框做成单选框一样,选中还可以取消
- js javascript 实现复选框全选功能 删除复选框选中项功能