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

时间：2018-09-25 15:29:13 阅读：174 评论：0 收藏：0 [点我收藏+]

标签：views summary date formdata status 简单 auth tran contex

全选、全不选、反选功能

html代码

JS代码

设置选中

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

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

标签：views summary date formdata status 简单 auth tran contex

原文地址：https://www.cnblogs.com/jpfss/p/9699476.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行