チェックボックスの要素を削除して他の要素を追加する

Question

現在、チェックボックスのチェック機能のいくつかを構築しようとしています。

私がそれらを追加したら、以前の色を削除することを除いて、それはうまくいくようです。私は、別の画像が選択されたときに別の画像から取り除いてみましたが、それを試してみると大したことはありませんでした。

私はかなり私のクラスがロードされるたびに見る方法を必要とする、それが他のタグ

を取り除くことは、その動作するように意図しています何かがチェックされていないとき感嘆符を持っている、X時にはありませんし、すべての6の、グリーンにチェックします。

FIDDLE： https://jsfiddle.net/3c1vhkwf/1/

$(document).ready(function() { 

     $('head').append('<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" />'); 

     $('.chkValidation input').change(function() { 

     $('input[name="' + this.name + '"]').not(this).prop('checked', false); 

     if(checkValues()) 
     { 
      if($('.chkValidation :checked').size() == 6) 
      { 
      $('<i class="fa fa-check" aria-hidden="true" style="color:green; display:inline-block;"></i>').insertAfter('.chkValidation :checked'); 
      } 
      else 
      { 
      $('<i class="fa fa-exclamation-circle" aria-hidden="true" style="color:orange"></i>').insertAfter(this); 
      } 
     } 
     else 
     { 
      $('<i class="fa fa-times" aria-hidden="true" style="color:red"></i>').insertAfter(this); 
     } 

     }); 

     function checkValues(){ 
     var valid = true; 
     $('.chkValidation input[type=checkbox]').each(function() { 
     if($(this).prop('checked')) 
     { 
      if($(this).prop('value') == "No") 
      { 
       valid = false; 
      } 
     } 
     }) 
     return valid; 
     } 
    }); 

Answer 1

あなたが接続できるクラスを作成する必要があります。とにかく、私は私はあなたがこのような何かを行うことができると信じて見ることができるものから、すべてのチェックボックスをはいチェックされている場合、あなたは自分のクラスを標的とすることにより、感嘆符アイコンを非表示言うことができますどこか検証する必要がある要素の上：例えば、追加のボックスがチェックされ、場合にのみ、すべてがチェックされている場合はチェックを持っているしたいので

.error:after { 
    content: '\f00d'; 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    margin: 0px 0px 0px 10px; 
    text-decoration: none; 
    color: red; 
} 

、以前の状態に戻すのは難しいです。私はフィールドセットそのものを緑にすることに決めましたが、あなたはいろいろなことをすることができます。同様に存在する場合Noとどれもチェックしていないよう

$('.chkValidation').find('input[value=Yes]:checked').length === $('.chkValidation').find('input[value=Yes]').length` 

：

$('.chkValidation').find('input[value=No]:checked').length === 0) 

最後に、これらのチェックのために、あなたはYesチェックボックスの同じ数をチェックし、それらの番号と一致するかどうかを確認する必要がありますセットがチェックされていないかどうかを把握、closest入力（チェックボックス）を見つけ、それもチェックされているかどうかを確認：

var yes = $this.closest('fieldset').find('input[value=Yes]').prop('checked'); 
var no = $this.closest('fieldset').find('input[value=No]').prop('checked'); 
if (no) 
    $fieldset.addClass('error'); 
if (!yes && !no) 
    $fieldset.addClass('warn'); 

JSFiddle

Answer 2

私はあなたのフィドルに見えたが、HTMLは、すべてのアップごちゃ混ぜにされています。

if($('.chkValidation :checked').size() == 6){ 
    $(".fa-exclamation-circle").hide(); //hides all exclamation icons