checkbox类型使用required属性时，如果给每个选项都添加，则需要选择全部选项后才能提交。
本文的方法可以实现只选择一个选项后即可提交。
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form action="http://www.baidu.com">
<label>
<input type="checkbox" name="test[]" value="1" required="required">test-1
</label>
<label>
<input type="checkbox" name="test[]" value="2" required="required">test-2
</label>
<label>
<input type="checkbox" name="test[]" value="3" required="required">test-3
</label>
<input type="submit">
</form>
<script>
var requiredCheckboxes = $(':checkbox[required]');
requiredCheckboxes.on('change', function(e) {
var checkboxGroup = requiredCheckboxes.filter('[name="' + $(this).attr('name') + '"]');
var isChecked = checkboxGroup.is(':checked');
checkboxGroup.prop('required', !isChecked);
});
</script>
</body>
</html>
**注：label标签的使用使得选择框和文字成为一个整体，点击文字即可完成选择。可以利用此标签设置点击整行进行选择。
扫一扫
3032
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
