如何檢查所有單選按鈕（已呈現）是否在Jquery/Javascript中被選中

Question

我能夠檢查所選的所有單選按鈕。 但是，我只想檢查呈現的那些（沒有「display：none」的那些）。

所以如果只選擇了1和3分區，它應該顯示爲真。目前，只有選擇了3才顯示爲真。

編輯 ：我已採取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

你很近，只需將$("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 2

您可以檢查父可見狀態太：

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 3

只需使用一個選擇排除非顯示的人和比較量發現元素的數量與同一組中選中的單選按鈕的數量（使用JQuery context）。如果金額相同，所有可見的按鈕都被選中。

此外，你真的不應該使用一個鏈接，當你沒有實際導航到任何地方。如果你只需要觸發一些代碼（就像這裏的情況），幾乎任何元素都可以綁定一個事件處理程序。通過不使用a，您不必取消鏈接的原生行爲（evt.preventDefault()）以及那些依賴於輔助技術的鏈接，例如屏幕閱讀器在屏幕閱讀器遇到鏈接時不會出現問題，實際上導航。

$(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 4

如果你得到的長度，

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

嘗試

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

是你在找什麼？你也需要得到這個名字並且把它連接起來，因爲$（this）不會讓你的對象成爲你的對象嗎？

Answer 5

請看看this。似乎用window.getComputedStyle來解決你的「如果可見」問題。