zoukankan      html  css  js  c++  java

  • JS----checked----checked选中和未选中的获取




    全选、全不选、反选功能


    html代码

    <form action="" id="oForm" name="myForm">
            <input type="checkbox" name="hobby" id="basket" value="basket">篮球<Br>
            <input type="checkbox" name="hobby" id="zuqiu" value="zuqiu" >足球<Br>
            <input type="checkbox" name="hobby" id="paiqiu" value="paiqiu">排球<Br>
            <input type="checkbox" name="hobby" id="wqiu" value="wqiu">网球<Br>
            <input type="checkbox" name="hobby" id="biqiu" value="biqiu">壁球<Br>
            <input type="checkbox" name="hobby" id="bpq" value="bpq">乒乓球<Br>
            <input type="checkbox" name="hobby" id="ymq" value="ymq">羽毛球<Br>
            <input type="button" name="all" id="all" value='全选' onclick="setVal(1)">
            <input type="button" name="allNo" id="allNo" value='全不选' onclick="setVal(0)">
            <input type="button" name="noCheck" id="noCheck" value='反选' onclick="setVal(-1)">
      </form>




    JS代码

    function setVal(iNum){
            var aForm = document.getElementById("myForm");
            var aArr = aForm.hobby;   
            for(var i=0;i<aArr.length;i++){        
                if( iNum<0 ){
                    aArr[i].checked = !aArr[i].checked;   
                }else{
                    aArr[i].checked = iNum;
                }           
            }
        }



    设置选中

    下边两种写法没有任何区别 只是少了些代码而已
    <input id="cb1" type="checkbox" checked />
    <input id="cb2" type="checkbox" checked="checked" />


    jquery赋值checked的几种写法:
    所有的jquery版本都可以这样赋值:
    // $("#cb1").attr("checked","checked");
    // $("#cb1").attr("checked",true);


    jquery1.6+:prop的4种赋值:
    // $("#cb1").prop("checked",true);//很简单就不说了哦
    // $("#cb1").prop({checked:true}); //map键值对
    // $("#cb1").prop("checked",function(){
    return true;//函数返回true或false
    });
    //$("#cb1").prop("checked","checked");



    为什么input checkbox有 checked='checked'还是没选中
    如果用jQuery1.6+来写的话：
    建议使用
    $(element).prop('checked', true/false);
    而不是
    $(element).attr('checked', true/false);
    其实也就相当于要使用：
    element.checked = true/false;
    而并不是
    element.setAttribute('checked', true/false/'checked');





    jquery判断checked的三种方法

    .attr('checked'):   //看版本1.6+返回:"checked"或"undefined" ;1.5-返回:true或false
    .prop('checked'): //16+:true/false
    .is(':checked'):    //所有版本:true/false//别忘记冒号哦




    jQuery获取未选中的checkbox

     $('input[type=checkbox]').not("input:checked");  




    jQuery获取选中的checkbox

    $('input[type=checkbox]:checked');






    jquery官网checked的用法

    http://api.jquery.com/checked-selector/





    DataTable翻页checked部分代码

    内容太多需要勾选时，我们需要做翻页，但是翻页要记录之前的页面勾选了哪些，需要借助input来记录。html代码如下:

    1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
    2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
    3. <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
    4. <%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %> 
    5. <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
    6. <%@ taglib uri="com.data.web.view.function" prefix="cf"%>
    7. <%
    8. String path = request.getContextPath();
    9. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    10. %>  
    11.  
    12. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    13. <html xmlns="http://www.w3.org/1999/xhtml">
    14. <head>
    15.  
    16. </head>
    17. <body>
    18. <link rel="stylesheet" href="/assets/js/dataTables/dataTables.responsive.min.css"></link>
    19. <div id="page-wrapper">
    20.     <div id="page-inner">
    21. 	<div class="col-md-12">
    22. 			<h1 class="page-head-line">  参考文献      <button id="btnSave" type="button" class="btn btn-success pull-right" data-loading-text="Saving...">保 存</button></h1>
    23. 	        <form class="form-inline col-sm-11" id="search_form">
    24. 					<input class="form-control" type="hidden" name="plate" value="8">
    25. 			</form>
    26. 	</div>
    27. 			
    28. 		<input class="form-control" type="hidden" id='checkList' >
    29. 		<div class="row">
    30. 			<div class="col-md-12">
    31. 				<div class="panel panel-default">
    32. 					<div class="panel-heading">参考文献列表</div>
    33. 					<div class="panel-body">
    34. 						<div class="table-responsive">
    35. 							<table
    36. 								class="table table-striped table-bordered responsive table-hover"
    37. 								id="table" cellspacing="0" width="100%">
    38. 								<thead>
    39. 									<tr>
    40. 										<th width="8%" class="min-mobile-l">期刊名</th>
    41. 										<th width="20%" class="desktop">标题</th>
    42. 										<th width="10%" class="min-mobile-l">作者</th>
    43. 										<th width="10%" class="min-mobile-l">摘要</th>
    44. 										<th width="10%" class="min-mobile-l">引用</th>
    45. 									</tr>
    46. 								</thead>
    47. 							</table>
    48. 						</div>
    49. 					</div>
    50. 				</div>
    51. 			</div>
    52. 		</div>
    53. </div>
    54. </div>
    55. </body>
    56. </html>
    57.  <!-- /. WRAPPER  -->
    58.     <!-- JS Scripts-->
    59.     <!-- jQuery Js -->
    60.     <script src="/assets/js/jquery-1.10.2.js"></script>
    61.     <!-- Bootstrap Js -->
    62.     <script src="/assets/js/bootstrap.min.js"></script>
    63.     <!-- Metis Menu Js -->
    64.     <script src="/assets/js/jquery.metisMenu.js"></script>
    65.       <!-- CUSTOM SCRIPTS -->
    66.     <script src="/assets/js/custom.js"></script>
    67.  
    68.     
    69.     <!-- Morris Chart Js 
    70.     <script src="assets/js/morris/raphael-2.1.0.min.js"></script>
    71.     <script src="assets/js/morris/morris.js"></script>-->
    72.     <!-- Custom Js 
    73.     <script src="assets/js/custom-scripts.js"></script>-->
    74.      <!-- DATA TABLE SCRIPTS -->
    75.     <script src="/assets/js/dataTables/jquery.dataTables.js"></script>
    76.     <script src="/assets/js/dataTables/dataTables.bootstrap.js"></script>
    77.     <script src="/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    78.     <script src="/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
    79. <script type="text/javascript">
    80.   $(function(){
    81. 	  
    82. 		var checkedIdsOld = "<c:forEach items="${ancestry.documents}" var="item">${ item.id }|</c:forEach>";
    83. 		$("#checkList").val(checkedIdsOld);
    84. 	  
    85. 	  refreshTable();
    86. 	  bindCheckListChange();
    87.         $('#btnSave').click(function(){
    88.         	$(this).button('loading');
    89.         	var allValue = $("#checkList").val();
    90.         	allValue = allValue.substring(0, allValue.length - 1);
    91.         	allValue = allValue.replace(/[ ]/g, "");
    92.         	var checkedIds = allValue.split("|");
    93.         	console.log(checkedIds);
    94.         	 $.postJSON('/docAssociate', 
    95.         			 checkedIds,
    96.         	 	function(res){
    97.         	 		$('#btnSave').button('reset');
    98.         	 		location.href = '/test}'
    99.         	 		if(!res.code){
    100.         	 			alert('保存失败');
    101.         	 		}
    102.         	 	}
    103.       	 	);
    104.         });  
    105.     });
    106.   
    107.   
    108.   
    109.  
    110.   
    111.   function bindCheckListChange() {
    112. 	  $('#table').on('change','.checkbox',function(){
    113. 			var allValue = $("#checkList").val();
    114. 			if (typeof($(this).attr("checked")) == "undefined") {
    115. 				//改变前是 未选中,则变为选中,把值增加到checkList中
    116. 				$(this).attr("checked", 'true');
    117. 				if (!contains(allValue, $(this).attr("value"), false)) {
    118. 					allValue += $(this).attr("value") + "|";
    119. 					$("#checkList").val(allValue);
    120. 					console.log(allValue);
    121. 				}
    122. 			} else {
    123. 				//改变前是选中,则变为未选中,把值从checkList中删除
    124. 				$(this).removeAttr("checked");
    125. 				if (contains(allValue, $(this).attr("value"), false)) {
    126. 					var rstr = $(this).attr("value") + "|";
    127. 					allValue = allValue.replace(rstr, "");
    128. 					$("#checkList").val(allValue);
    129. 					console.log(allValue);
    130. 				}
    131. 			}
    132. 	  })
    133. 	}
    134.   
    135.   
    136. 	function refreshTable() {
    137. 		$('#table')
    138. 				.DataTable(
    139. 						{
    140. 							responsive : true,
    141. 							lengthChange : false,
    142. 							serverSide : true,//分页，取数据等等的都放到服务端去
    143. 							stateSave : true,
    144. 							searching : false,
    145. 							processing : true,//载入数据的时候是否显示“载入中”
    146. 							bDestroy : true,
    147. 							pageLength : 2,//首次加载的数据条数
    148. 							ordering : false,//排序操作在服务端进行，所以可以关了。
    149. 							language : {
    150. 								processing : "载入中",//处理页面数据的时候的显示
    151. 								paginate : {//分页的样式文本内容。
    152. 									previous : "上一页",
    153. 									next : "下一页",
    154. 									first : "第一页",
    155. 									last : "最后一页"
    156. 								},
    157. 								zeroRecords : "没有内容",//table tbody内容为空时，tbody的内容。
    158. 								//下面三者构成了总体的左下角的内容。
    159. 								info : "第 _PAGE_/_PAGES_页 共 _TOTAL_条记录",//左下角的信息显示，大写的词为关键字。
    160. 								infoEmpty : "第 _PAGE_/_PAGES_页 共 _TOTAL_条记录",//筛选为空时左下角的显示。
    161. 								infoFiltered : ""//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
    162. 							},
    163. 							"columnDefs" : [ {
    164. 								"defaultContent" : "",
    165. 								"targets" : "_all"
    166. 							} ],
    167. 							"ajax" : {//类似jquery的ajax参数，基本都可以用。
    168. 								type : "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
    169. 								url : "/referenceDocument/listData",
    170. 								dataSrc : "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
    171. 								data : function(d) {//d 是原始的发送给服务器的数据，默认很长。
    172. 									var param = {};//因为服务端排序，可以新建一个参数对象
    173. 									param.start = d.start;//开始的序号
    174. 									param.length = d.length;//要取的数据的
    175. 									var formData = $("#search_form")
    176. 											.serializeArray();//把form里面的数据序列化成数组
    177. 									formData.forEach(function(e) {
    178. 										param[e.name] = e.value;
    179. 									});
    180. 									return param;//自定义需要传递的参数。
    181. 								}
    182. 							},
    183. 							"columns" : [
    184. 									{
    185. 										"data" : "author",
    186. 										"class" : "text-center"
    187. 									},
    188. 									{
    189. 										"data" : "title",
    190. 										"class" : "text-center",
    191.  
    192. 									},
    193. 									{
    194. 										"data" : "name",
    195. 										"class" : "text-center",
    196.  
    197. 									},
    198. 									{
    199. 										"data" : "summary",
    200. 										"class" : "text-center",
    201. 									},
    202. 									{
    203. 										
    204. 										 "class": "text-center",
    205. 									      "render": function(data, type, row, position) {
    206. 									  		var allValue = $("#checkList").val();
    207. 									    	allValue = allValue.substring(0, allValue.length - 1);
    208. 									    	allValue = allValue.replace(/[ ]/g, "");
    209. 									    	var checkedIds = allValue.split("|");
    210. 									        return '<input type="checkbox" class="checkbox"  value="' + row.id + '" ' + (checkedIds && checkedIds.indexOf(row.id) > -1 ? 'checked="checked"' : '') + '">';
    211. 									      }
    212. 									}
    213. 									 ]
    214.  
    215. 						});
    216. 	}
    217. 	
    218. 	
    219. 	/**
    220. 	*string:原始字符串
    221. 	*substr:子字符串
    222. 	*isIgnoreCase:忽略大小写
    223. 	*/
    224. 	function contains(string, substr, isIgnoreCase) {
    225. 		if (isIgnoreCase) {
    226. 			string = string.toLowerCase();
    227. 			substr = substr.toLowerCase();
    228. 		}
    229. 		var startChar = substr.substring(0, 1);
    230. 		var strLen = substr.length;
    231. 		for (var j = 0; j < string.length - strLen + 1; j++) {
    232. 			if (string.charAt(j) == startChar) //如果匹配起始字符,开始查找
    233. 			{
    234. 				if (string.substring(j, j + strLen) == substr) //如果从j开始的字符与str匹配，那ok
    235. 				{
    236. 					return true;
    237. 				}
    238. 			}
    239. 		}
    240. 		return false;
    241. 	}
    242.  
    243.  
    244.   /**
    245.      * like $.getJSON, Load JSON-encoded data from the server using a POST HTTP
    246.      * request.
    247.      */
    248.   $.postJSON = function(url, data, fnSuccess, fnError) {
    249.     $.ajax({
    250.       url: url,
    251.       type: "POST",
    252.       dataType: "json",
    253.       cache: false,
    254.       contentType: "application/json",
    255.       data: JSON.stringify(data),
    256.       success: function(result) {
    257.         fnSuccess && (fnSuccess(result) || 1) || (typeof result.code != 'undefined' && !result.code && tip(result.error || '更新失败...'));
    258.       },
    259.       error: function(err) {
    260.         if (err.status == 401) {
    261.           return tip(err.status + ' ' + err.statusText + ', 当前会话已失效，请去新窗口 <a target="_blank" href="/login?from=' + encodeURIComponent(location.href) + '">登陆</a> 后继续操作!', 60000);
    262.         }
    263.         fnError && (fnError.apply($, Array.prototype.slice.call(arguments)) || 1) || tip(err.status + ' ' + err.statusText);
    264.       }
    265.     });
    266.   };
    267. </script>
  • 相关阅读:
    向工信部投诉中国联通、移动、电信等运营服务商的权威途径
    如何把本机Sql Sever数据库转移到虚拟主机sql数据库
    SQL Server 2005如何远程连接数据库？
    mssql server 2005还原数据库bak文件与“备份集中的数据库备份与现有的xx数据库不同”解决方法
    傲游5里保存的网址，在傲游4不能同步？外加几句吐槽
    mysql数据库基础的简单操作指南
    MVC框架模式技术实例(用到隐藏帧、json、仿Ajax、Dom4j、jstl、el等)
    Web---JSTL(Java标准标签库)-Core核心标签库、I18N国际化、函数库
    Jupyter Notebook导入自定义模块时ImportError
    Pandas数据处理(2): 数据透视表，行转列、列转行、以及一行生成多行
  • 原文地址：https://www.cnblogs.com/jpfss/p/9699476.html
Copyright © 2011-2022 走看看