Jquery/Javascriptですべてのラジオボタン（レンダリングされている）が選択されているかどうかをチェックする方法

Question

選択されているラジオボタンをすべて確認できます。 しかし、レンダリングされたもの（「display：none」を持たないもの）をチェックしたいだけです。

したがって、1と3の除算のみが選択されている場合は、真を表示する必要があります。現在、すべて3が選択されている場合にのみ、trueを表示します。

EDIT ：私は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

ただ、非表示のものを除外し、セレクタを使用して量を比較します同じセット内のチェックされたラジオボタンの数に一致します（01を使用））。金額が同じ場合は、すべての表示可能なボタンが選択されています。

また、実際にナビゲートしていないときにはリンクを使用しないでください。いくつかのコードをトリガする必要がある場合（ここの場合のように）、ちょうどどの要素にもclickイベントハンドラがバインドされています。 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") { 

を試してみてください、あなたが探しているものということですか？また、名前を取得して連結する必要がありますか？$（これは）あなたのオブジェクトも取得しません。

Answer 5

PLSがthisを見てみましょう。 window.getComputedStyleを使用して「見える場合」の問題を解決しているようです。