計算每組檢查了多少單選按鈕（至少 2 個總選擇）

Question

我需要驗證 7 組單選按鈕以確保至少選擇了 2 組； 如果不顯示警報。

我的頁面上還有其他一些與這些無關的單選按鈕。 它們不應包含在此檢查中。

基本上，我需要從所有 7 個組中選擇至少 2 個組。

我嘗試了一些在社區中發布的方法，但都沒有奏效。

 $('.counter').text($(':radio:checked').length); $('input[type=radio]').change(function() { $('.counter').text($(':radio:checked').length); }); // I also tried this: /* $('input[type="radio"]').on('click',function(){ $('.totleft').text($('input[type="radio"]:checked').length+'/'+($('input[type="radio"]').length/2)) }); /*/

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div> <input class="group1" id="a" name="group1" value="Accept" type="radio"> <input class="group1" id="b" name="group1" value="Reject" type="radio"> <input class="group1" id="c" name="group1" value="Accept" type="radio"> <input class="group1" id="d" name="group1" value="Reject" type="radio"> </div> <div> <input class="group2" id="e" name="group2" value="Accept" type="radio"> <input class="group2" id="f" name="group2" value="Reject" type="radio"> <input class="group2" id="g" name="group2" value="Accept" type="radio"> <input class="group2" id="h" name="group2" value="Reject" type="radio"> </div> <div> <input class="group3" id="i" name="group3" value="Accept" type="radio"> <input class="group3" id="j" name="group3" value="Reject" type="radio"> <input class="group3" id="k" name="group3" value="Accept" type="radio"> <input class="group3" id="l" name="group3" value="Reject" type="radio"> </div> <div> <input class="group4" id="m" name="group4" value="Accept" type="radio"> <input class="group4" id="n" name="group4" value="Reject" type="radio"> <input class="group4" id="o" name="group4" value="Accept" type="radio"> <input class="group4" id="p" name="group4" value="Reject" type="radio"> </div> <div> <input class="group5" id="q" name="group5" value="Accept" type="radio"> <input class="group5" id="r" name="group5" value="Reject" type="radio"> <input class="group5" id="s" name="group5" value="Accept" type="radio"> <input class="group5" id="t" name="group5" value="Reject" type="radio"> </div> <div> <input class="group6" id="u" name="group6" value="Accept" type="radio"> <input class="group6" id="v" name="group6" value="Reject" type="radio"> <input class="group6" id="w" name="group6" value="Accept" type="radio"> <input class="group6" id="x" name="group6" value="Reject" type="radio"> </div> <div> <input class="group7" id="y" name="group7" value="Accept" type="radio"> <input class="group7" id="z" name="group7" value="Reject" type="radio"> <input class="group7" id="aa" name="group7" value="Accept" type="radio"> <input class="group7" id="bb" name="group7" value="Reject" type="radio"> </div> ``` function VALIDATE_FORM() { myFunction7(); var starttime = $("#start_time_1").val(); var endtime = $("#end_time_1").val(); //console.log(starttime); if (starttime == '') { Swal.fire({ title: "Start Time", text: "is REQUIRED,": icon, "error": showConfirmButton, false: allowOutsideClick, false: allowEscapeKey, false: timer, 3000: returnFocus, false; }). document.getElementById('start_time_1');focus(); return false; } else { return true; } }; ```

Answer 1

這應該有效：

var atLeastTwoAnswered = true;
$("input:radio[name^='group']").each(function(){
  var name = $(this).attr("name");
  if($("input:radio[name="+name+"]:checked").length < 2)
  {
    atLeastTwoAnswered = false;
  }
});
alert(atLeastTwoAnswered);

雖然警報將在 window 加載時觸發，但您可以將其添加到某個事件中。

Answer 2

也許您可以像這樣給輸入元素的 id 屬性並運行一個 for 循環來檢查每個組的單選按鈕的狀態：

 let totalCheckedGroupCount = 0; for(let i=1; i<=3; i++) { const radioEl1 = document.getElementById("g_"+i+"_0"); const radioEl2 = document.getElementById("g_"+i+"_1"); if(radioEl1 && radioEl2 && radioEl1.checked || radioEl2.checked) { totalCheckedGroupCount++; } } console.log(totalCheckedGroupCount);

 <input id="g_1_0" name="group1" value="Accept" type="radio"> <input id="g_1_1" name="group1" value="Reject" type="radio" checked> <input id="g_2_0" name="group2" value="Accept" type="radio"> <input id="g_2_1" name="group2" value="Reject" type="radio" checked> <input id="g_3_0" name="group3" value="Accept" type="radio"> <input id="g_3_1" name="group3" value="Reject" type="radio">

Answer 3

要執行您需要的操作，您可以將所有radio輸入包裝在一個表單中。 提交表單后，您可以檢查所有:selected電台的length ，然后正常允許/禁止表單提交。

通過將收音機包裝在一個form中，它限制了這種邏輯，以便它忽略您頁面上的任何其他收音機控件。

 let $container = $('#radio-container'); let getSelectedRadioCount = () => $container.find(':radio:checked').length; let updateRadioCounter = () => $('.counter').text(getSelectedRadioCount()); updateRadioCounter(); // on load $container.find(':radio').on('change', updateRadioCounter); // on change $('button').on('click', e => { e.preventDefault(); if (getSelectedRadioCount() < 2) { console.log('You need to select at last 2 radio options...'); } else { console.log('Submit form here...'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <div id="radio-container"> <div> <input class="group1" id="a" name="group1" value="Accept" type="radio"> <input class="group1" id="b" name="group1" value="Reject" type="radio"> <input class="group1" id="c" name="group1" value="Accept" type="radio"> <input class="group1" id="d" name="group1" value="Reject" type="radio"> </div> <div> <input class="group2" id="e" name="group2" value="Accept" type="radio"> <input class="group2" id="f" name="group2" value="Reject" type="radio"> <input class="group2" id="g" name="group2" value="Accept" type="radio"> <input class="group2" id="h" name="group2" value="Reject" type="radio"> </div> <div> <input class="group3" id="i" name="group3" value="Accept" type="radio"> <input class="group3" id="j" name="group3" value="Reject" type="radio"> <input class="group3" id="k" name="group3" value="Accept" type="radio"> <input class="group3" id="l" name="group3" value="Reject" type="radio"> </div> <div> <input class="group4" id="m" name="group4" value="Accept" type="radio"> <input class="group4" id="n" name="group4" value="Reject" type="radio"> <input class="group4" id="o" name="group4" value="Accept" type="radio"> <input class="group4" id="p" name="group4" value="Reject" type="radio"> </div> <div> <input class="group5" id="q" name="group5" value="Accept" type="radio"> <input class="group5" id="r" name="group5" value="Reject" type="radio"> <input class="group5" id="s" name="group5" value="Accept" type="radio"> <input class="group5" id="t" name="group5" value="Reject" type="radio"> </div> <div> <input class="group6" id="u" name="group6" value="Accept" type="radio"> <input class="group6" id="v" name="group6" value="Reject" type="radio"> <input class="group6" id="w" name="group6" value="Accept" type="radio"> <input class="group6" id="x" name="group6" value="Reject" type="radio"> </div> <div> <input class="group7" id="y" name="group7" value="Accept" type="radio"> <input class="group7" id="z" name="group7" value="Reject" type="radio"> <input class="group7" id="aa" name="group7" value="Accept" type="radio"> <input class="group7" id="bb" name="group7" value="Reject" type="radio"> </div> <div class="counter"></div> <button type="button">Check if valid</button> </div>

Answer 4

您可以 map 每個 div 的選定組，過濾檢查的組並計算結果。 該片段不使用 JQuery 並使用事件委托

 const checkedGroups = _ => [...document.querySelectorAll(`#radio-container div`)].map(v => v.querySelector(`[type='radio']:checked`)).filter(v => v).length; document.addEventListener(`click`, handle); function handle(evt) { if (evt.target.type === `radio`) { const nChecked = checkedGroups(); document.querySelector(`.counter`).textContent = `Nr of checked groups: ${ nChecked} ${nChecked >= 2? `(valid)`: ``}`; if (nChecked >= 2) { document.querySelector(`#cando`).removeAttribute(`disabled`); } } }

 <div id="radio-container"> <div> <input class="group1" id="a" name="group1" value="Accept" type="radio"> <input class="group1" id="b" name="group1" value="Reject" type="radio"> <input class="group1" id="c" name="group1" value="Accept" type="radio"> <input class="group1" id="d" name="group1" value="Reject" type="radio"> </div> <div> <input class="group2" id="e" name="group2" value="Accept" type="radio"> <input class="group2" id="f" name="group2" value="Reject" type="radio"> <input class="group2" id="g" name="group2" value="Accept" type="radio"> <input class="group2" id="h" name="group2" value="Reject" type="radio"> </div> <div> <input class="group3" id="i" name="group3" value="Accept" type="radio"> <input class="group3" id="j" name="group3" value="Reject" type="radio"> <input class="group3" id="k" name="group3" value="Accept" type="radio"> <input class="group3" id="l" name="group3" value="Reject" type="radio"> </div> <div> <input class="group4" id="m" name="group4" value="Accept" type="radio"> <input class="group4" id="n" name="group4" value="Reject" type="radio"> <input class="group4" id="o" name="group4" value="Accept" type="radio"> <input class="group4" id="p" name="group4" value="Reject" type="radio"> </div> <div> <input class="group5" id="q" name="group5" value="Accept" type="radio"> <input class="group5" id="r" name="group5" value="Reject" type="radio"> <input class="group5" id="s" name="group5" value="Accept" type="radio"> <input class="group5" id="t" name="group5" value="Reject" type="radio"> </div> <div> <input class="group6" id="u" name="group6" value="Accept" type="radio"> <input class="group6" id="v" name="group6" value="Reject" type="radio"> <input class="group6" id="w" name="group6" value="Accept" type="radio"> <input class="group6" id="x" name="group6" value="Reject" type="radio"> </div> <div> <input class="group7" id="y" name="group7" value="Accept" type="radio"> <input class="group7" id="z" name="group7" value="Reject" type="radio"> <input class="group7" id="aa" name="group7" value="Accept" type="radio"> <input class="group7" id="bb" name="group7" value="Reject" type="radio"> </div> <div class="counter"></div> <button type="button" id="cando" disabled>submit</button> </div>