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

最新推荐文章于 2023-01-30 19:43:57 发布
最新推荐文章于 2023-01-30 19:43:57 发布
阅读量752 收藏
点赞数
文章标签： java json xhtml
原文链接：http://www.cnblogs.com/jpfss/p/9699476.html
版权




全选、全不选、反选功能

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='全选' οnclick="setVal(1)">
        <input type="button" name="allNo" id="allNo" value='全不选' οnclick="setVal(0)">
        <input type="button" name="noCheck" id="noCheck" value='反选' οnclick="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>




转载于:https://www.cnblogs.com/jpfss/p/9699476.html

WGH100817
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ng-repeat中Checkbox默认选中的方法教程
10-18
这里的`ng-checked="{{c.Selected}}"`将`c.Selected`的值转换为JavaScript表达式，用于控制Checkbox的选中状态。 在AngularJS的控制器部分，我们创建了一个`pilotApp`模块和`CarCtrl`控制器。`$http`服务被用来向...
jQuery-多级复选框选中代码.zip
07-11
代码片段：  <label class="all-checked"> <span class="ui-checkbox">  <input type="checkbox" name="all-checked" value="">  全选      <div </div>
Js判断checked
qq_41818857的博客
02-12 2075
一、ele.checked ===true if(ele.checked === true){ alert(‘被选’) } 二、ele.checked ===false if(ele.checked === false){ alert(‘没被选中’) }
js----checkbox对象的属性（如何设置选框被选中）
weixin_52551539的博客
12-25 1132
注意：将checked属性设置为true表示选中，false表示不选中 n
静态页面通过js实现checked的选中
qq_20426717的博客
03-28 1226
使用 js 设置chexkbox 为选中或者未选中状态
qq_57197323的博客
01-30 1060
使用 js 设置 checkbox 是否为选中状态
input[type=“checkbox“]:checked实现改变checkbox的样式，js实现点击确认同意后实现勾选checkbox实现方法
qq_38188228的博客
12-11 2457
问题一 怎么实现用CSS改变input 中的type=“checkbox” 属性的样式？ 实现方法 复制以下CSS input[type="checkbox"] { width: 20px; height: 20px; background-color: #fff; -webkit-appearance: none; border: 1px solid #c9c9c9; border-radius: 2px; outline: none; } input[type="checkb
javascript-TreeView父子联动效果保持节点状态一致
10-30
在 TreeView 控件中，当一个节点被选中时，该节点的所有子节点也应该被选中，反之亦然。为了实现这个功能，我们需要修改 TreeView.htc 文件中的代码。TreeView.htc 文件是 TreeView 控件的客户端脚本文件，包含了...
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
10-17
然而，在这个示例中，我们使用`ng-true-value`和`ng-false-value`来设置复选框选中和未选中时的特定值，而不是默认的布尔值。 `ng-true-value`属性允许我们指定当复选框被选中时的值，这里设置为"1"。同样，`ng-...
Vue.js 中的 v-model 指令及绑定表单元素的方法
10-17
Vue.js 是一个流行的前端框架，它的核心特性之一就是数据绑定。`v-model` 指令在 Vue 中用于实现视图和模型之间的双向数据绑定，它使得表单元素的值能够实时反映到 Vue 实例的数据对象中，反之亦然。在本文中，我们...
js 关于checkbox相关操作
curtain的专栏
10-31 236
1.form表单提交一组checkbox $("#gift_is_rand input[type=checkbox]").click(function(){ var giftRandObj = $("#gift_is_rand input[type=checkbox]");    var len = giftRandObj.length;    var giftRand = '';
jq控制input type=checkbox复选框的checked的值true，false
前端小狮的博客
08-30 6758
原始js方法忽略不写. 最开始，可能都习惯使用attr 设置属性，但现在大多数是不管用了。 大概是在jq 1.6版本号之后新增的prop()。 由于attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。 prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。...
js判断checkbox是否选中的小技巧
BestwishesTolover的专栏
01-03 374
1.判断checkbox是否选中/未选中： 是：if($("").is(":checked")){ } 否：$("").not(":checked");
bootstrap之 checkbox 值回显， 选中。
拉轰的大蜗牛
03-28 3844
在很多页面都会需要根据加载的数据来控制checkbox是否选中，以前的方法在这个UI里并不适用，现贴下两种代码供大家参考。 前提条件：该字段在数据库中是以“，”间隔的字符串，如：“WIFI,电视,有线宽带” 第一种：普通checkbox var servicesArray = data.Services.split(",");//数据库里获取到的值 ...
jquery判断checked的三种方法:
热门推荐
snn1410的专栏
08-21 4万+
jquery判断checked的三种方法: .attr(‘checked’):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false .prop(‘checked’): //16+:true/false .is(‘:checked’):    //所有版本:true/false//别忘记冒号哦 jquery赋值checked的
input框checkBox全选单选js操作，后台取值
qq_1141193930的博客
04-18 1484
bootstrap 样式代码&lt;div class="md-checkbox has-success"&gt; &lt;input type="checkbox" id="rlt-chk-all-checkboxBox-work" class="md-check" name="ult-chk-all-work"&gt; &lt;label for=&q
js如何获取is-checked属性
最新发布
04-05
在HTML中，通常使用checkbox或radio控件来表示一个选项是否被选中。这些控件具有一个is-checked属性，用于表示当前选项是否被选中。在JavaScript中，可以通过以下方式来获取这个属性的值： 1. 使用DOM API获取控件元素，并使用checked属性来获取is-checked属性的值： ```javascript var checkbox = document.getElementById("myCheckbox"); var isChecked = checkbox.checked; ``` 2. 使用jQuery库来获取控件元素，并使用prop()方法来获取is-checked属性的值： ```javascript var isChecked = $("#myCheckbox").prop("checked"); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值