全選、全不選、反選功能
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代碼如下:
-
<%@ page language=
"java"
import=
"java.util.*" pageEncoding=
"UTF-8"%>
-
<%@ taglib prefix=
"c" uri=
"http://java.sun.com/jsp/jstl/core" %>
-
<%@ taglib uri=
"http://java.sun.com/jsp/jstl/fmt" prefix=
"fmt"%>
-
<%@ taglib prefix=
"shiro" uri=
"http://shiro.apache.org/tags" %>
-
<%@ taglib uri=
"http://java.sun.com/jsp/jstl/functions" prefix=
"fn"%>
-
<%@ taglib uri=
"com.data.web.view.function" prefix=
"cf"%>
-
<%
-
String path = request.getContextPath();
-
String basePath = request.getScheme()+
"://"+request.getServerName()+
":"+request.getServerPort()+path+
"/";
-
%>
-
-
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
-
<html xmlns=
"http://www.w3.org/1999/xhtml">
-
<head>
-
-
</head>
-
<body>
-
<link rel=
"stylesheet" href=
"/assets/js/dataTables/dataTables.responsive.min.css"></link>
-
<div id=
"page-wrapper">
-
<div id=
"page-inner">
-
<div
class=
"col-md-12">
-
<h1
class=
"page-head-line"> 參考文獻 <button id=
"btnSave" type=
"button"
class=
"btn btn-success pull-right" data-loading-text=
"Saving...">保 存</button></h1>
-
<form
class=
"form-inline col-sm-11" id=
"search_form">
-
<input
class=
"form-control" type=
"hidden" name=
"plate" value=
"8">
-
</form>
-
</div>
-
-
<input
class=
"form-control" type=
"hidden" id=
'checkList' >
-
<div
class=
"row">
-
<div
class=
"col-md-12">
-
<div
class=
"panel panel-default">
-
<div
class=
"panel-heading">參考文獻列表</div>
-
<div
class=
"panel-body">
-
<div
class=
"table-responsive">
-
<table
-
class=
"table table-striped table-bordered responsive table-hover"
-
id=
"table" cellspacing=
"0" width=
"100%">
-
<thead>
-
<tr>
-
<th width=
"8%"
class=
"min-mobile-l">期刊名</th>
-
<th width=
"20%"
class=
"desktop">標題</th>
-
<th width=
"10%"
class=
"min-mobile-l">作者</th>
-
<th width=
"10%"
class=
"min-mobile-l">摘要</th>
-
<th width=
"10%"
class=
"min-mobile-l">引用</th>
-
</tr>
-
</thead>
-
</table>
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
</div>
-
</body>
-
</html>
-
<!-- /. WRAPPER -->
-
<!-- JS Scripts-->
-
<!-- jQuery Js -->
-
<script src=
"/assets/js/jquery-1.10.2.js"></script>
-
<!-- Bootstrap Js -->
-
<script src=
"/assets/js/bootstrap.min.js"></script>
-
<!-- Metis Menu Js -->
-
<script src=
"/assets/js/jquery.metisMenu.js"></script>
-
<!-- CUSTOM SCRIPTS -->
-
<script src=
"/assets/js/custom.js"></script>
-
-
-
<!-- Morris Chart Js
-
<script src=
"assets/js/morris/raphael-2.1.0.min.js"></script>
-
<script src=
"assets/js/morris/morris.js"></script>-->
-
<!-- Custom Js
-
<script src=
"assets/js/custom-scripts.js"></script>-->
-
<!-- DATA TABLE SCRIPTS -->
-
<script src=
"/assets/js/dataTables/jquery.dataTables.js"></script>
-
<script src=
"/assets/js/dataTables/dataTables.bootstrap.js"></script>
-
<script src=
"/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
-
<script src=
"/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
-
<script type=
"text/javascript">
-
$(function(){
-
-
var checkedIdsOld =
"<c:forEach items="${ancestry.documents}
" var="item
">${ item.id }|</c:forEach>";
-
$(
"#checkList").val(checkedIdsOld);
-
-
refreshTable();
-
bindCheckListChange();
-
$(
'#btnSave').click(function(){
-
$(
this).button(
'loading');
-
var allValue = $(
"#checkList").val();
-
allValue = allValue.substring(
0, allValue.length -
1);
-
allValue = allValue.replace(/[ ]/g,
"");
-
var checkedIds = allValue.split(
"|");
-
console.log(checkedIds);
-
$.postJSON(
'/docAssociate',
-
checkedIds,
-
function(res){
-
$(
'#btnSave').button(
'reset');
-
location.href =
'/test}'
-
if(!res.code){
-
alert(
'保存失敗');
-
}
-
}
-
);
-
});
-
});
-
-
-
-
-
-
function bindCheckListChange() {
-
$(
'#table').on(
'change',
'.checkbox',function(){
-
var allValue = $(
"#checkList").val();
-
if (typeof($(
this).attr(
"checked")) ==
"undefined") {
-
//改變前是 未選中,則變為選中,把值增加到checkList中
-
$(
this).attr(
"checked",
'true');
-
if (!contains(allValue, $(
this).attr(
"value"),
false)) {
-
allValue += $(
this).attr(
"value") +
"|";
-
$(
"#checkList").val(allValue);
-
console.log(allValue);
-
}
-
}
else {
-
//改變前是選中,則變為未選中,把值從checkList中刪除
-
$(
this).removeAttr(
"checked");
-
if (contains(allValue, $(
this).attr(
"value"),
false)) {
-
var rstr = $(
this).attr(
"value") +
"|";
-
allValue = allValue.replace(rstr,
"");
-
$(
"#checkList").val(allValue);
-
console.log(allValue);
-
}
-
}
-
})
-
}
-
-
-
function refreshTable() {
-
$(
'#table')
-
.DataTable(
-
{
-
responsive :
true,
-
lengthChange :
false,
-
serverSide :
true,
//分頁，取數據等等的都放到服務端去
-
stateSave :
true,
-
searching :
false,
-
processing :
true,
//載入數據的時候是否顯示“載入中”
-
bDestroy :
true,
-
pageLength :
2,
//首次加載的數據條數
-
ordering :
false,
//排序操作在服務端進行，所以可以關了。
-
language : {
-
processing :
"載入中",
//處理頁面數據的時候的顯示
-
paginate : {
//分頁的樣式文本內容。
-
previous :
"上一頁",
-
next :
"下一頁",
-
first :
"第一頁",
-
last :
"最后一頁"
-
},
-
zeroRecords :
"沒有內容",
//table tbody內容為空時，tbody的內容。
-
//下面三者構成了總體的左下角的內容。
-
info :
"第 _PAGE_/_PAGES_頁 共 _TOTAL_條記錄",
//左下角的信息顯示，大寫的詞為關鍵字。
-
infoEmpty :
"第 _PAGE_/_PAGES_頁 共 _TOTAL_條記錄",
//篩選為空時左下角的顯示。
-
infoFiltered :
""
//篩選之后的左下角篩選提示(另一個是分頁信息顯示，在上面的info中已經設置，所以可以不顯示)，
-
},
-
"columnDefs" : [ {
-
"defaultContent" :
"",
-
"targets" :
"_all"
-
} ],
-
"ajax" : {
//類似jquery的ajax參數，基本都可以用。
-
type :
"post",
//后台指定了方式，默認get，外加datatable默認構造的參數很長，有可能超過get的最大長度。
-
url :
"/referenceDocument/listData",
-
dataSrc :
"data",
//默認data，也可以寫其他的，格式化table的時候取里面的數據
-
data : function(d) {
//d 是原始的發送給服務器的數據，默認很長。
-
var param = {};
//因為服務端排序，可以新建一個參數對象
-
param.start = d.start;
//開始的序號
-
param.length = d.length;
//要取的數據的
-
var formData = $(
"#search_form")
-
.serializeArray();
//把form里面的數據序列化成數組
-
formData.forEach(function(e) {
-
param[e.name] = e.value;
-
});
-
return param;
//自定義需要傳遞的參數。
-
}
-
},
-
"columns" : [
-
{
-
"data" :
"author",
-
"class" :
"text-center"
-
},
-
{
-
"data" :
"title",
-
"class" :
"text-center",
-
-
},
-
{
-
"data" :
"name",
-
"class" :
"text-center",
-
-
},
-
{
-
"data" :
"summary",
-
"class" :
"text-center",
-
},
-
{
-
-
"class":
"text-center",
-
"render": function(data, type, row, position) {
-
var allValue = $(
"#checkList").val();
-
allValue = allValue.substring(
0, allValue.length -
1);
-
allValue = allValue.replace(/[ ]/g,
"");
-
var checkedIds = allValue.split(
"|");
-
return
'<input type="checkbox" class="checkbox" value="' + row.id +
'" ' + (checkedIds && checkedIds.indexOf(row.id) > -
1 ?
'checked="checked"' :
'') +
'">';
-
}
-
}
-
]
-
-
});
-
}
-
-
-
/**
-
*string:原始字符串
-
*substr:子字符串
-
*isIgnoreCase:忽略大小寫
-
*/
-
function contains(string, substr, isIgnoreCase) {
-
if (isIgnoreCase) {
-
string = string.toLowerCase();
-
substr = substr.toLowerCase();
-
}
-
var startChar = substr.substring(
0,
1);
-
var strLen = substr.length;
-
for (var j =
0; j < string.length - strLen +
1; j++) {
-
if (string.charAt(j) == startChar)
//如果匹配起始字符,開始查找
-
{
-
if (string.substring(j, j + strLen) == substr)
//如果從j開始的字符與str匹配，那ok
-
{
-
return
true;
-
}
-
}
-
}
-
return
false;
-
}
-
-
-
/**
-
* like $.getJSON, Load JSON-encoded data from the server using a POST HTTP
-
* request.
-
*/
-
$.postJSON = function(url, data, fnSuccess, fnError) {
-
$.ajax({
-
url: url,
-
type:
"POST",
-
dataType:
"json",
-
cache:
false,
-
contentType:
"application/json",
-
data: JSON.stringify(data),
-
success: function(result) {
-
fnSuccess && (fnSuccess(result) ||
1) || (typeof result.code !=
'undefined' && !result.code && tip(result.error ||
'更新失敗...'));
-
},
-
error: function(err) {
-
if (err.status ==
401) {
-
return tip(err.status +
' ' + err.statusText +
', 當前會話已失效，請去新窗口 <a target="_blank" href="/login?from=' + encodeURIComponent(location.href) +
'">登陸</a> 后繼續操作!',
60000);
-
}
-
fnError && (fnError.apply($, Array.prototype.slice.call(arguments)) ||
1) || tip(err.status +
' ' + err.statusText);
-
}
-
});
-
};
-
</script>