<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<label for="agreement1">协议一</label>
<input type="checkbox" name="btn" id="agreement1" error="请通过协议一">
<label for="agreement2">协议二</label>
<input type="checkbox" name="btn" id="agreement2" error="请通过协议二">
<input type="button" value="提交" onclick="submit()">
</div>
<script>
function submit() {
//通过error属性获取到dom集合
let doms = document.querySelectorAll('[error]')
let map = new Map();
doms.forEach(item => {
map.set(item, {
error: item.getAttribute('error'),
status: item.checked
})
});
//通过every操作 当所有条件都满足时才返回true
let stutas = [...map].every(([el, config]) => {
//通过短路操作 当未选择时就会执行后面的操作
config.status || alert(config.error);
return config.status
})
// 判断stutas是否为true
// 通过短路操作 当为true就会执行后面的操作
stutas && console.log('继续要操作的方法')
}
</script>
</body>
</html>
我们可以看到代码执行的结果