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

Posted 星朝

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>


































































































以上是关于JS----checked----checked选中和未选中的获取的主要内容，如果未能解决你的问题，请参考以下文章

WPF dataGrid 单选按钮

如何实现android中三个单选按钮横向排列且只能选一个？

Dart语法之可选参数

jQuery选择器如何选择页面中的所有单选按钮和多选按钮？

MFC 在代码中增加单选按钮

IoT选工作是先选行业，还是先选公司？