图片 1

jquery 全选、全不选、反选效果的实现代码【推荐】

Posted by

JS代码

<script type="text/javascript"> var n = 2; //添加 function add() { var name = document.getElementById.value; var age = document.getElementById.value; var department = document.getElementById("department").value; var choose = document.createElement; choose.setAttribute("type", "checkbox"); choose.setAttribute("name", "choice"); choose.setAttribute("id", "p" + n); n++; var a = document.createElement; a.innerHTML = "删除"; a.setAttribute("href", "#"); a.setAttribute("onclick", "del; var td1 = document.createElement; var td2 = document.createElement; var td3 = document.createElement; var td4 = document.createElement; var td5 = document.createElement; td1.appendChild td2.innerHTML = name; td3.innerHTML = age; td4.innerHTML = department; td5.appendChild; var tr = document.createElement; tr.appendChild tr.appendChild; tr.appendChild; tr.appendChild; tr.appendChild; var table = document.getElementById; table.appendChild; } //全选 function choose { var check_box = document.getElementsByName; for(var i = 0; i < check_box.length; i++) { check_box[i].checked = true; } } //不选 function no_choose { var check_box = document.getElementsByName; for(var i = 0; i < check_box.length; i++) { check_box[i].checked = false; } } //反选 function re_choose { var check_box = document.getElementsByName; for(var i = 0; i < check_box.length; i++) { if(check_box[i].checked == true) { check_box[i].checked = false; } else { check_box[i].checked = true; } } } function del { var flag = confirm; var tds = val.parentNode; var trs = tds.parentNode; var tas = trs.parentNode; if { tas.removeChild; } } </script>

实现功能:

实现效果:

<title>haran.info_jquery实例_全选全不选反选_select-all_unselect-all_reverse</title>
<meta http-equiv="content-type"content="text/html; charset=UTF-8"/>
<script src="/js/jquery-1.8.3.min.js"type="text/javascript"></script><!-- 引入Jquery -->

HTML代码

姓名:<input type="text" /><br /> 年龄:<input type="text" /><br /> 部门:<input type="text" /><br /> <input type="button" value="添加" onclick="add()" /> <input type="button" value="全选" onclick="choose" /> <input type="button" value="不选" onclick="no_choose" /> <input type="button" value="反选" onclick="re_choose" /> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td>选择</td> <td>姓名</td> <td>年龄</td> <td>部门</td> <td>操作</td> </tr> <tr> <td><input type="checkbox" name="choice" ></td> <td>王一</td> <td>18</td> <td>教育部</td> <td> <a href="#" onclick="del">删除</a> </td> </tr> </table>
<scripttype="text/javascript">
$(document).ready(function () {

  $("#selAll").click(function () { //":checked"匹配所有的复选
    $("#div1 :checkbox").attr("checked", true); //"#div1 :checked"之间必须有空格checked是设置选中状态。如果为true则是选中fo否则false为不选中
  });

  $("#unselAll").click(function () { 
    $("#div1 :checkbox").attr("checked", false); 
  });

  //理解用迭代原理each(function(){})
  $("#reverse").click(function () { 
  $("#div1 :checkbox").each(function () {
  $(this).attr("checked",!$(this).attr("checked")); //!$(this).attr("checked")判断复选框的状态:如果选中则取反
    }); 
  });
}); 
</script>

里面除了实现了复选框的全选、全不选以及反选功能之外,还有对节点的创建、插入等功能。

body布局:

图片 1效果动图

以上这篇jquery
全选、全不选、反选效果的实现代码【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • jquery实现全选、不选、反选的两种方法
  • jQuery对checkbox
    复选框的全选全不选反选的操作
  • 利用jQuery实现CheckBox全选/全不选/反选的简单代码
  • 基于jquery实现复选框全选,反选,全不选等功能
  • JQuery选中checkbox方法代码实例(全选、反选、全不选)
  • 基于jQuery实现复选框的全选 全不选
    反选功能
  • jquery全选/全不选/反选另一种实现方法(配合原生js)
  • jquery
    实现checkbox全选,反选,全不选等功能代码(奇数)
  • jQuery实现全选、反选和不选功能

相关文章

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注