直接写好的 html 代码, jq 是都生效的, 但是换成是由 js 生成的代码, 就得用 js 的 onclick 来写了
- <div class="modal_M">
- <div class="m_b_head">
- <div class="iradio_square-blue radioCheckAll" onclick="SelectObject()">
- <input type="radio" checked="">
- <ins></ins>
- </div>
- <label> 全选 <span id="totalCount"></span> 人 </label>
- </div>
- <div class="m_b_body">
- <div class="CheckboxList"></div>
- </div>
- </div>
- .iradio_square-blue {
- display: block;
- margin: 9px 5px 3px 10px;
- padding: 0;
- width: 20px;
- height: 20px;
- background: url(/content/images/checkbox/blue_small_nocheck.png) no-repeat;
- border: none;
- cursor: pointer;
- position: absolute;
- top: -1px;
- left: 0;
- }
- .iradio_square-blue> input[type="radio"] {
- position: absolute;
- top: 0;
- left: 0;
- display: block;
- width: 100%;
- height: 100%;
- margin: 0px;
- padding: 0px;
- background: rgb(255, 255, 255);
- border: 0px;
- opacity: 0;
- }
- .iradio_square-blue> ins {
- position: absolute;
- top: 0;
- left: 0;
- display: block;
- width: 100%;
- height: 100%;
- margin: 0px;
- padding: 0px;
- background: url(/content/images/checkbox/blue_small_nocheck.png) no-repeat;
- border: 0px;
- }
- .iradio_square-blue, .iradio_square-blue.static:hover {
- background-position: -120px 0;
- }
- .iradio_square-blue.checked> ins {
- background: url(/content/images/checkbox/blue_small_checked.png) no-repeat;
- }
- // 点击内容页新增按钮
- function showModal_ObjectContent_add() {
- // 设置树的假数据
- // setModalLeftztree();
- var objectTreeSetting = {// 树形基本配置
- view: {
- selectedMulti: false,
- showLine: false,
- showIcon: true
- },
- data: {
- simpleData: {
- enable: true,
- idKey: "F_RiverId",
- pIdKey: "F_ParentId",
- fAreaLvl: "F_WaterType"
- }
- },
- callback: { onClick: onClickBasinIndex }
- };
- var objectTreeData;
- $.ajax({
- type: "post",
- url: $.JRest.serviceAddr + 'WqAny/RiverTree', // 树形的数据地址
- dataType: "json",
- async: false,
- data: { userid: user.F_UserId, token: user.token, waterType: "", areaid:"" },
- success: function (response) {
- var res = JSON.parse(response); // 格式化 json
- if (res.status == "0" && res.data.riverTree.length> 0) {
- objectTreeData = res.data.riverTree; // 赋值给 angular 变量
- for (i = 0; i <1; i++) {
- objectTreeData.open = true;// 默认展开树
- }
- }
- $.fn.zTree.init($('#Modal_tree_object'), objectTreeSetting, objectTreeData); // 生成树
- }
- });
- function onClickBasinIndex(e, treeId, treeNode) {// 点击复选框触发事件
- var jsonData = { userid: user.F_UserId, token: user.token, waterType: treeNode.F_RiverId.substr(0, 1), riverID: treeNode.F_RiverId.substr(1, treeNode.F_RiverId.length - 1) };
- var result = JSON.parse($.JRest.CallService("Exam", "GetUserByRiverID", "post", false, jsonData, null));
- if (result.status == 0) {
- $(".CheckboxList").html("");
- if (examObject == null || examObject == undefined)
- return;
- var ListIndex = 0;
- for (i = 0; i <result.data.length; i++) {
- var IsFind = 0;
- for (m = 0; m < examObjectSetting.length; m++) {
- if (examObjectSetting.F_RiverId == treeNode.F_RiverId.substr(1, treeNode.F_RiverId.length - 1) && examObjectSetting.F_UserId == result.data[i].F_UserId && F_ObjectType == treeNode.F_RiverId.substr(0, 1)) {
- ListIndex = m;
- IsFind = m;
- }
- }
- if (IsFind == 0) {
- examObjectSetting.push({ F_ObjectId: examObject.F_ObjectId, F_RiverId: treeNode.F_RiverId.substr(1, treeNode.F_RiverId.length - 1), F_UserId: result.data[i].F_UserId, F_ObjectType: treeNode.F_RiverId.substr(0, 1), F_RealName: result.data[i].F_RealName, F_RiverName: treeNode.name, E_RoleName: result.data[i].E_RoleName });
- ListIndex = examObjectSetting.length - 1;
- }
- var htmlText = document.createElement("div");
- var text1 = '<div class="iradio_square-blue"onclick="setRadioChecked(this);"><input type="radio"ListIndex="' + ListIndex + '"><ins></ins></div>';
- var text2 = '<label>' + result.data[i].F_RealName + '</label>';
- var text3 = '<span>' + treeNode.name + (result.data[i].E_RoleName == undefined ? "": result.data[i].E_RoleName) +'</span>';
- htmlText.innerHTML = text1 + text2 + text3;
- $(".CheckboxList").append(htmlText);
- }
- $("#totalCount").text(result.data.length);
- }
- }
- // 行政区划
- // 显示弹窗
- $("#myModal_object_ContentAdd").modal('show');
- }
- // 点击弹窗的全选标记, 切换状态 checked
- $(".radioCheckAll").click(function () {
- //$(this).siblings().removeClass("active");
- $(this).toggleClass("checked");
- //alert("!");
- if ($(this).hasClass("checked")) {
- $(".m_b_body .iradio_square-blue").addClass("checked");
- } else {
- $(".m_b_body .iradio_square-blue").toggleClass("checked",false);
- }
- });
- // 点击列表里的选择
- function setRadioChecked(obj) {
- //alert("2");
- var objstr = obj.getAttribute("class");
- var ifChecked = objstr.search("checked");
- switch (ifChecked) {
- case -1:
- // 如果未出现
- obj.setAttribute("class", "iradio_square-blue checked");
- break;
- default:
- // 出现
- obj.setAttribute("class", "iradio_square-blue");
- break;
- }
- }
setRadioChecked 这个函数就是 js 的写法
来源: http://www.qdfuns.com/article/19533/4dc00a7d35edc91a4a6e7efcb1dd4b9b.html