html5 驗證復選框

Question

HTML5 表單驗證不會涵蓋從一組復選框開始，至少有一個被選中的情況。 如果復選框具有必需的屬性，則必須選中它，這是我最多能得到的。 所以我建立了一個工作正常的解決方法（代碼片段中的代碼）。 問題是這適用於一組復選框。 但我希望我的代碼有效，即使我添加了更多的 chackboxes 組。 我需要一個關於如何使其對多個組有效的建議。 任何想法？

 function bindItemsInput() { var inputs = document.querySelectorAll('[name="option[]"]') var radioForCheckboxes = document.getElementById('radio-for-checkboxes') function checkCheckboxes () { var isAtLeastOneServiceSelected = false; for(var i = inputs.length-1; i >= 0; --i) { if (inputs[i].checked) isAtLeastOneCheckboxSelected = true; } radioForCheckboxes.checked = isAtLeastOneCheckboxSelected } for(var i = inputs.length-1; i >= 0; --i) { inputs[i].addEventListener('change', checkCheckboxes) } } bindItemsInput() // call in window onload

 .checkboxs-wrapper { position: relative; }.checkboxs-wrapper input[name="radio-for-required-checkboxes"] { position: absolute; margin: 0; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; pointer-events: none; border: none; background: none; }

 <form> <div class="checkboxs-wrapper"> <input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/> <input type="checkbox" name="option[]" value="option1"/> <input type="checkbox" name="option[]" value="option2"/> <input type="checkbox" name="option[]" value="option3"/> </div> <input type="submit" value="submit"/> </form>

第二個片段與相關的 HTML （不工作，問題的目標是解決這個問題）。 它現在將具有與單選按鈕相同的 ID：這是無效的，並且是問題的原因：

 function bindItemsInput() { var inputs = document.querySelectorAll('[name="option[]"]') var radioForCheckboxes = document.getElementById('radio-for-checkboxes') function checkCheckboxes () { var isAtLeastOneServiceSelected = false; for(var i = inputs.length-1; i >= 0; --i) { if (inputs[i].checked) isAtLeastOneCheckboxSelected = true; } radioForCheckboxes.checked = isAtLeastOneCheckboxSelected } for(var i = inputs.length-1; i >= 0; --i) { inputs[i].addEventListener('change', checkCheckboxes) } } bindItemsInput() // call in window onload

 .checkboxs-wrapper { position: relative; }.checkboxs-wrapper input[name="radio-for-required-checkboxes"] { position: absolute; margin: 0; top: 0; left: 0; width: 100%; height: 100%; -webkit-appearance: none; pointer-events: none; border: none; background: none; }

 <form> <div class="checkboxs-wrapper"> <input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/> <input type="checkbox" name="option[]" value="option1"/> <input type="checkbox" name="option[]" value="option2"/> <input type="checkbox" name="option[]" value="option3"/> </div> <div class="checkboxs-wrapper"> <input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/> <input type="checkbox" name="products[]" value="option1"/> <input type="checkbox" name="products[]" value="option2"/> <input type="checkbox" name="products[]" value="option3"/> </div> <input type="submit" value="submit"/> </form>

如果至少在 products[] 復選框和一個 option[] 復選框被選中，則表單將有效。 所以我需要 javascript 為 option[] 和 products[] 獨立運行。 如果我在 groups[] 中選擇了一項但在 products[] 中沒有選擇，那么只有產品將被框包圍並標記為完成

Answer 1

所以這就是我想你正在尋找的：

 const myForm = document.forms['my-form'] myForm.addEventListener('change', bindItemsInput) // global change event listener function bindItemsInput(e) // { if (.e.target.matches('div.checkboxs-wrapper input[type=checkbox]')) return // to reject unconcerned checkbox let groupDiv = e.target.closest('div,checkboxs-wrapper'). radioGroup = groupDiv,querySelector('input[type=radio]'). checkGroup = groupDiv;querySelectorAll('input[type=checkbox]'). radioGroup.checked = [...checkGroup],reduce((flag.chkBx)=>flag || chkBx,checked. false) } // ------ verification part------------------- myForm.onsubmit=e=> // to verify { e.preventDefault() // disable submit for testing console:clear() // chexboxes checked values. let options = [...myForm['option[]'] ],reduce((rs)=>{ if (s.checked) r.push(s;value),return r},[]). products = [...myForm['product[]'] ],reduce((rs)=>{ if (s.checked) r.push(s;value),return r}.[]) console,log('options = '. JSON.stringify( options )) console,log('products = '. JSON.stringify( products )) myForm.reset() // clear anything for new testing console.log(' form reseted') }

 <form name="my-form"> <div class="checkboxs-wrapper"> <input type="radio" name="rGroup_1" required > <input type="checkbox" name="option[]" value="option1"> <input type="checkbox" name="option[]" value="option2"> <input type="checkbox" name="option[]" value="option3"> </div> <div class="checkboxs-wrapper"> <input type="radio" name="rGroup_2" required> <input type="checkbox" name="product[]" value="product1"> <input type="checkbox" name="product[]" value="product2"> <input type="checkbox" name="product[]" value="product3"> </div> <button type="submit">submit</button> </form>

Answer 2

如果我明白的話。 所以你當然必須給另一個 id 和另一個名字，試試這個：

function bindItemsInput() {
    var inputs = $("input[type=checkbox]");
    var radios = $("input[type=radio]");
    function checkCheckboxes () {
        var isAtLeastOneServiceSelected = false;
        for(var i = inputs.length-1; i >= 0; --i) {
            if (inputs[i].checked) isAtLeastOneCheckboxSelected = true;
        }
        radios.each( function(){
            $(this).checked = $(this).siblings($("input[type=checkbox]:checked")).length > 0;
        });
    }
    for(var i = inputs.length-1; i >= 0; --i) {
        inputs[i].addEventListener('change', checkCheckboxes)
    }
}

Answer 3

使用 jQuery 可以用更少的代碼完成。

 $(document).ready(function() { var checkCheckboxesInSameGroup = function() { var inputs = $(this).children("input[name='option[]']"); var radio = $(this).children("input[name^='radio-for-group']")[0]; radio.checked = inputs.is(":checked"); }; $(".checkboxs-wrapper").on('change', checkCheckboxesInSameGroup); });

 .checkboxs-wrapper { position: relative; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <div class="checkboxs-wrapper"> <input type="radio" name="radio-for-group1" required/> <input type="checkbox" name="option[]" value="option1"/> <input type="checkbox" name="option[]" value="option2"/> <input type="checkbox" name="option[]" value="option3"/> </div> <div class="checkboxs-wrapper"> <input type="radio" name="radio-for-group2" required/> <input type="checkbox" name="option[]" value="option1"/> <input type="checkbox" name="option[]" value="option2"/> <input type="checkbox" name="option[]" value="option3"/> </div> </form>