js地址多选实现,居住地,户口,职业,行业多选2
时间: 2023-11-02 21:06:18 浏览: 25
您可以使用多选框(checkbox)来实现这个功能。以下是一个简单的实现示例:
HTML代码:
```
<label>居住地:</label>
<input type="checkbox" name="location" value="北京">北京
<input type="checkbox" name="location" value="上海">上海
<input type="checkbox" name="location" value="广州">广州
<input type="checkbox" name="location" value="深圳">深圳
<label>户口:</label>
<input type="checkbox" name="household" value="城镇">城镇
<input type="checkbox" name="household" value="农村">农村
<label>职业:</label>
<input type="checkbox" name="occupation" value="教师">教师
<input type="checkbox" name="occupation" value="医生">医生
<input type="checkbox" name="occupation" value="工人">工人
<input type="checkbox" name="occupation" value="农民">农民
<label>行业:</label>
<input type="checkbox" name="industry" value="IT">IT
<input type="checkbox" name="industry" value="金融">金融
<input type="checkbox" name="industry" value="教育">教育
<input type="checkbox" name="industry" value="制造业">制造业
```
JavaScript代码:
```
// 获取所有多选框
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
// 为每个多选框添加点击事件
checkboxes.forEach(function(checkbox) {
checkbox.addEventListener('click', function() {
// 获取当前多选框所属的分类
var category = checkbox.name;
// 获取该分类下被选中的多选框
var selectedCheckboxes = document.querySelectorAll('input[name="' + category + '"]:checked');
// 如果该分类下被选中的多选框数量超过2个,则取消最后一个被选中的多选框的选中状态
if (selectedCheckboxes.length > 2) {
selectedCheckboxes[selectedCheckboxes.length - 1].checked = false;
}
});
});
```
这段代码会为所有多选框添加点击事件,当用户点击某个多选框时,它会检查该多选框所属的分类下被选中的多选框数量是否超过2个,如果超过2个,则取消最后一个被选中的多选框的选中状态。这样,用户就只能选择最多2个选项。