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標籤的使用使得選擇框和文字成爲一個整體,點擊文字即可完成選擇。可以利用此標籤設置點擊整行進行選擇。