如何檢查是否在Jquery / Javascript中選擇了所有已渲染的單選按鈕

Question

我能夠檢查所有選中的單選按鈕。 但是，我只想檢查那些已渲染的對象（那些沒有“ display：none”的對象）。

因此，如果僅選擇1和3除法，則應顯示true。 當前，只有選擇全部3個，它才會顯示true。

編輯 ：我已經采取Shree33的答案，並使其與input:radio:visible 。

 $(document).ready(function() { $("a").click(function(e) { e.preventDefault(); var all_answered = true; $(".division input:radio:visible").each(function() { var name = $(this).attr("name"); if ($("input:radio[name=" + name + "]:checked").length == 0) { all_answered = false; } }); alert(all_answered); }) }); 

 .test{ //display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="division">1 <input type="radio" name="radio1" value="false" /> <input type="radio" name="radio1" value="true" /> </div> <div class="division test">2 <input type="radio" name="radio2" value="false" /> <input type="radio" name="radio2" value="true" /> </div> <div class="division">3 <input type="radio" name="radio3" value="false" /> <input type="radio" name="radio3" value="true" /> </div> <div>4 <input type="radio" name="radio4" value="false" /> <input type="radio" name="radio4" value="true" /> </div> </form> <a href="#">click</a> 

Answer 1

只需使用一個選擇器（不包括未顯示的選擇器），然后將找到的元素數量與同一集合中選中的單選按鈕的數量進行比較（使用JQuery context ）。 如果數量相同，則已選擇所有可見按鈕。

另外，當您實際上沒有在任何地方導航時，實際上不應該使用鏈接。 如果只需要觸發一些代碼（如此處所示），則幾乎任何元素都可以綁定有click事件處理程序。 通過不使用a ，您不必取消鏈接的本機行為（ evt.preventDefault() ），而那些依賴於輔助技術的鏈接，例如屏幕閱讀器，則不會遇到當屏幕閱讀器遇到a時出現的問題。實際無法導航的鏈接。

 $(function() { $("#click").click(function(e) { // Get only the visible DIVs that have the "division" class var visibleDIVs = $("div.division:not(.hide)"); // Now that we have a collection that contains only the div elements // that are visible, we can get the count of them easily with: visibleDIVs.length // We can also search the document for any checked radio buttons, but only those // that are part of the visible divs collection like this: $("input:radio:checked", visibleDIVs). // (the second argument (, visibleDIVs) constrains the search for radio buttons to just // the collection of visilbe divs we've already gotten) and once we have those, // we can also get the count of them by checking the .length of that collection. // If the count of visible divs (visibleDIVs.length) equals the count of the visible // checked radio buttons, then all buttons have been checked: if(visibleDIVs.length === $("input:radio:checked", visibleDIVs).length){ alert("All Answered"); } }) }); 

 /* Make the clickable div look like a link */ #click { text-decoration:underline; cursor:pointer; } .hide { display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="division">1 <input type="radio" name="radio1" value="false"> <input type="radio" name="radio1" value="true"> </div> <div class="division hide">2 <input type="radio" name="radio2" value="false"> <input type="radio" name="radio2" value="true"> </div> <div class="division">3 <input type="radio" name="radio3" value="false"> <input type="radio" name="radio3" value="true"> </div> </form> <div id="click">click</div> 

Answer 2

您已經接近，只需將$("input:radio")選擇器更改$("input:radio:visible") 。 那應該工作。

 $(document).ready(function() { $("a").click(function(e) { e.preventDefault(); var all_answered = true; $("input:radio:visible").each(function() { var name = $(this).attr("name"); if ($("input:radio[name=" + name + "]:checked").length == 0) { all_answered = false; } }); alert(all_answered); }) }); 

 .test{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div class="division">1 <input type="radio" name="radio1" value="false" /> <input type="radio" name="radio1" value="true" /> </div> <div class="division test">2 <input type="radio" name="radio2" value="false" /> <input type="radio" name="radio2" value="true" /> </div> <div class="division">3 <input type="radio" name="radio3" value="false" /> <input type="radio" name="radio3" value="true" /> </div> </form> <a href="#">click</a> 

Answer 3

您也可以檢查父級可見狀態：

if (($("input:radio[name=" + name + "]:first").parent().is(':visible')) &&
        ($("input:radio[name=" + name + "]:checked").length == 0)) {
    all_answered = false;
}

https://jsfiddle.net/StepBaro/bLp8wbnh/3/

Answer 4

你要去的地方，

if ($("input:radio[name=" + name + "]:checked").length == 0) {

嘗試

if ($("input:radio[name=" + name + "]:checked").length == 0 && $(this).is(":visible") {

那是您要找的東西嗎？ 另外，您還需要獲取名稱並連接它嗎，因為$（this）不會也使您獲得對象嗎？

Answer 5

請看看這個 。 似乎可以解決window.getComputedStyle的“如果可見”問題。