html thymeleaf模板 动态网页, 专长: 后面的内容 根据从后台获取的 zz人数 和 zy人数 生成 组长组员 单选框, 分类 复选框, 单选框选中对应的组长数 和组员数
时间: 2024-03-02 08:52:39 浏览: 75
好的,针对你的要求,我能够给你提供一种实现方式,具体的代码如下:
```
<div>
<label>组长:</label>
<input type="radio" name="leader" th:value="${leader}" th:checked="${leader == 'zz' ? 'checked' : ''}">zz
<input type="radio" name="leader" th:value="${leader}" th:checked="${leader == 'zy' ? 'checked' : ''}">zy
</div>
<div>
<label>分类:</label>
<input type="checkbox" name="classification" value="A" th:checked="${selectedClassifications.contains('A')}">A
<input type="checkbox" name="classification" value="B" th:checked="${selectedClassifications.contains('B')}">B
<input type="checkbox" name="classification" value="C" th:checked="${selectedClassifications.contains('C')}">C
</div>
<script th:inline="javascript">
var zzNum = /*从后台获取的zz人数*/;
var zyNum = /*从后台获取的zy人数*/;
$("input[name='leader']").click(function() {
var leader = $("input[name='leader']:checked").val();
if (leader === 'zz') {
$("input[name='classification']").each(function() {
if ($(this).val() === 'A') {
$(this).attr('disabled', false);
} else {
$(this).attr('disabled', true);
$(this).prop('checked', false);
}
});
} else if (leader === 'zy') {
$("input[name='classification']").each(function() {
if ($(this).val() === 'A') {
$(this).attr('disabled', false);
} else {
$(this).attr('disabled', false);
}
});
}
});
$("input[name='classification']").click(function() {
var leader = $("input[name='leader']:checked").val();
var selectedClassifications = [];
$("input[name='classification']:checked").each(function() {
selectedClassifications.push($(this).val());
});
var num = 0;
for (var i = 0; i < selectedClassifications.length; i++) {
if (selectedClassifications[i] === 'A') {
num++;
}
}
if (leader === 'zz' && num > zzNum) {
$(this).prop('checked', false);
alert('组长组员总数不能超过' + (zzNum + zyNum));
} else if (leader === 'zy' && num > zyNum) {
$(this).prop('checked', false);
alert('组长组员总数不能超过' + (zzNum + zyNum));
}
});
</script>
```
这段代码实现了根据从后台获取的 zz 人数和 zy 人数生成组长组员单选框,以及分类复选框,并且根据单选框选中的组长和分类复选框选中的内容,来限制组长组员数和分类的选择。同时这段代码也使用了 thymeleaf 模板引擎来动态渲染页面。
阅读全文