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

发布时间：2023-09-06 02:15责任编辑：郭大石关键词：暂无标签

???????????????

全选、全不选、反选功能

html代码

JS代码

设置选中

下边两种写法没有任何区别只是少了些代码而已
<input type="checkbox" checked />
<input 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

<%@ 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">

<head>

</head>

<body>

<div >

???<div >

??<div >

???????????<h1 > ?参考文献 ?????<button type="button" data-loading-text="Saving...">保存</button></h1>

??????????<form >

????????????????<input type="hidden" name="plate" value="8">

??????????</form>

??</div>

???????????

???????<input type="hidden" id=‘checkList‘ >

??????<div >

?????????<div >

???????????????<div >

?????????????????<div >参考文献列表</div>

?????????????????<div >

??????????????????????<div >

????????????????????????<table

??????????????????????????????

??????????????????????????????? cellspacing="0" width="100%">

?????????????????????????????<thead>

??????????????????????????????????<tr>

?????????????????????????????????????<th width="8%" >期刊名</th>

???????????????????????????????????????<th width="20%" >标题</th>

????????????????????????????????????<th width="10%" >作者</th>

???????????????????????????????????????<th width="10%" >摘要</th>

???????????????????????????????????????<th width="10%" >引用</th>

???????????????????????????????????</tr>

????????????????????????????</thead>

?????????????????????????</table>

?????????????????????</div>

???????????????????</div>

???????????????</div>

???????????</div>

???????</div>

</div>

</body>

</html>

???

???

???<script src="/assets/js/jquery-1.10.2.js"></script>

???

???<script src="/assets/js/bootstrap.min.js"></script>

???

???<script src="/assets/js/jquery.metisMenu.js"></script>

?????

???<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>-->

????

???<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>

?$(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);

????????????}

?????????}

???})

??}

知识推荐

我的编程学习网——分享web前端后端开发技术知识。垃圾信息处理邮箱 tousu563@163.com 网站地图