1.最近写后台用到了checkbox，顺便温习一下H5的自定义属性对象dataset
2.效果是这样式的：
image.png
3结构代码：由于一些小原因这里代码这样重复的写了一下，其实可以直接使用tymeleaf（目前在使用）模板进行模板化操作。
<section class="content">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">批量生成优惠券</h3>
</div>
<form class="form-horizontal">
<div class="box-body">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label title="合伙人暂时无法使用优惠券!">
<input type="checkbox" disabled=disabled readonly=readonly> 高级合伙人
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" id="user-one" data-type="NormalUser" data-aaa="">平台用户(普通)
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" id="user-two" data-type="NormalUserUnderPartner">平台用户(合伙人直属)
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" id="user-three" data-type="SeniorDealer"> 高级经销商
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" id="all-user">全部平台用户(不包括合伙人)
</label>
</div>
</div>
</div>
</div>
<div class="box-footer">
<button type="button" class="btn btn-info pull-right" id="generate-coupon-batch" title="按照此模板格式,为已经选择的用户生成优惠券!">生成优惠券</button>
</div>
</form>
</div>
</section>
主要看input标签：
<input type="checkbox" id="user-one" data-
type="NormalUser" data-aaa="">平台用户(普通)
这里的data-type就是自定义属性对象：具体使用就是获取标签，然后用标签对象点dataset点data后面跟的名字就行了，这里也是遵循驼峰命名的。下面详细介绍一下这块代码的js。
4.行为代码：
（1）：这里是checkbox选中不选中，全选然后全部标记，一个不选然后全选消失，简单了解一下就行了。
不过这里踩出来一个坑需要注意一下： prop与attr的区别使用环境。通俗的讲也就是对于HTML元素本身就带有的固有属性，处理时，使用prop方法。对于html元素我们自己定义的DOM属性，处理时，使用attr方法。请自行百度，一百度一大堆，下面这个挺详细的：
https://www.cnblogs.com/ipetergo/p/6491321.html
//批量生成优惠券 用户类型选择
var userCheckBoxes = $("input[id^='user']")
$('#all-user').change(function(){
userCheckBoxes.prop('checked', this.checked)
});
//子checkbox是否全选中判断
userCheckBoxes.change(function(){
var allChecked = true;
for (var i=0,length = userCheckBoxes.length; i<length;++i){
if (!userCheckBoxes[i].checked) {
allChecked = false;
break;
}
}
$("#all-user").prop("checked",allChecked);
});
（2）：这里是选中之后取出自己定义的值来，然后ajax请求后台接口，再就是在controller、 service、 responsitory、布拉布拉的逻辑处理、持久化等操作，这里就不说了。
现在说一下dataset：
//批量生成优惠券 点击批量生成优惠券按钮
$('#generate-coupon-batch').click(function(){
var arr = ["NormalUser","NormalUserUnderPartner","SeniorDealer","SeniorPartner"];
var data = [];
$("input[id^='user']").each(function() {
console.log(this);
if (this.checked) {
data.push(this.dataset.type);
}
})
console.log('aaa', data)
if (data.length === 0){
alert("请先选择用户类型!");
} else {
var info = data.join(',');
var url = "/ActiveManagement/generateBatchCoupon/" + '[[${modelId}]]' + '/' + info;
ajax(url,info);
}
});
通过点击“生成优惠券”按钮触发click事件，然后在三个需要使用的checkbox上添加id属性，接下来使用选择器 input[id^='user']选中，each，拿到this，判断checked，获取自己通过data-type存储的值，push到数组里。然后也可以使用join等一些方法将数组转化成字符串传到后台，后台可以通过添加的标记使用split拆分放入数组再拿出使用：下面简单看一下这个对应的接口吧：
/**
* 批量生成优惠券模块
* id 模板id
* staffLevel 用户等级
* @return
*/
@RequestMapping(value="generateBatchCoupon/{id}/{staffLevel}",method=RequestMethod.GET)
@ResponseBody
public int generateBatchCoupon(@PathVariable Integer id,@PathVariable String staffLevel ) {
System.out.println(id + "====" + staffLevel);
//获取用户
String arr[] = staffLevel.split(",");
List<User> user = new ArrayList<User>();
for(String level : arr){
user.addAll(userResponsitoryAdmin.selectUserByStaffLevel(level));
}
//获取模板实体类
CashCouponModel cashCouponModel = activeResponsitoryAdmin.selectCashCouponByPrimary(id);
//请求接口生成优惠券
cashCouponServicePub.addUserCoupons(user,cashCouponModel);
return 1;
}
网友评论