在每input 加上 required 監聽 oninput=”renderCheckbox('checkbox');” checkbox:input 的 name
<div class="form-check form-check-inline">
<input type="checkbox" name="checkbox" value="複選1" class="form-check-input checkbox" id="checkbox_0" required="" oninput="rendeCheckbox('checkbox');">
<label class="form-check-label" for="checkbox_0">複選1</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="checkbox" value="複選2" class="form-check-input checkbox" id="checkbox_1" required="" oninput="rendeCheckbox('checkbox');">
<label class="form-check-label" for="checkbox_1">複選2</label>
</div>
函式
function renderCheckbox(name){
if(isAtLeastOneChecked(name)){
removeRequired(name);
}else{
setRequired(name);
}
}
function isAtLeastOneChecked(name) {
let checkboxes = Array.from(document.getElementsByName(name));
return checkboxes.some(function(item) {
return item.checked;
});
}
function removeRequired(name){
let checkboxes = Array.from(document.getElementsByName(name));
for(let i in checkboxes){
checkboxes[i].removeAttribute('required');
}
}
function setRequired(name){
let checkboxes = Array.from(document.getElementsByName(name));
for(let i in checkboxes){
checkboxes[i].setAttribute('required', true);
}
}