如何在选中所有框之前将此表单显示为绿色？

Question

我有一个小表单，如果用户针对所有问题单击“是”，则会显示一条消息，说明您是合格的。

因此，在jQuery代码中，如果yes的检查值等于4，则显示绿色的您是合格的消息。但是，如果选中的值不等于4，则会出现红色错误，表示您没有资格（即使只点击了两个是值）。

有没有什么方法可以更改它，以便在检查所有4个单选按钮之前显示绿色限定信息？

我也有一个jsfiddle，请参阅：link

$("input").on("click", function() {
  if ($('input[value=yes1]:checked, input[value=yes2]:checked, input[value=yes3]:checked, input[value=yes4]:checked').length === 4) {

    $("#correct").show();
    $("#incorrect").hide();
  } else {
    $("#correct").hide();
    $("#incorrect").show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left question">Do you own a car?</div>
<div class="right answer">
  <div class="leftradio">
    <label>Yes</label>
    <input type="radio" id="yes1" value="yes1" name="iCheck1">
    </input>
  </div>
  <div class="rightradio">
    <label>No</label>
    <input type="radio" id="no1" name="iCheck1"></input>
  </div>
</div>
<div class="right">
  <div class="left question">Has someone lived with you for at least 6months within the last 4 years?</div>
  <div class="right answer">
    <div class="leftradio">
      <label>Yes</label>
      <input type="radio" id="yes2" value="yes2" name="iCheck2"></input>
    </div>
    <div class="rightradio">
      <label>No</label>
      <input type="radio" id="no2" name="iCheck2"></input>
    </div>
  </div>
</div>
<div class="row">
  <div class="left">
    <div class="left question">Do you have home insurance?</div>
    <div class="right answer">
      <div class="leftradio">
        <label>Yes</label>
        <input type="radio" id="yes3" value="yes3" name="iCheck3">
        </input>
      </div>
      <div class="rightradio">
        <label>No</label>
        <input type="radio" id="no3" name="iCheck3">
        </input>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="left question">Do you spend more than around £400 per month on bills?</div>
    <div class="right answer">
      <div class="leftradio">
        <label>Yes</label>
        <input type="radio" id="yes4" value="yes4" name="iCheck4">
        </input>
      </div>
      <div class="rightradio">
        <label>No</label>
        <input type="radio" id="no4" name="iCheck4">
        </input>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div id="correct">
    <div class="boxtext">
      YOU QUALIFY!</div>
  </div>
  <div id="incorrect">
    <div class="boxtext"><span style="font-weight:bold">X</span>SORRY BUT YOU DON'T QUALIFY!</div>
  </div>
</div>

Answer 1

我会向父母添加课程，首先是有答案，如果是无效的（否）。然后检查是否有四个答案，没有残疾人保持绿色，否则变红。

＆＃13;

＆＃13;

$("#correct").show();
$("#incorrect").hide();
$( "input" ).on( "click", function() {
    var par=$(this).parent().parent();
    if($(this).attr('id').indexOf('no')>=0 && !par.hasClass('inValid')){
        par.toggleClass('inValid');
    }else if($(this).attr('id').indexOf('yes')>=0 && par.hasClass('inValid')){
        par.toggleClass('inValid');
             }
    if(!par.hasClass('done'))
        par.toggleClass('done');
    if($('.done').length==4&&$('.inValid').length>0){
        $("#correct").hide();
		$("#incorrect").show();
    }else{
        $("#correct").show();
		$("#incorrect").hide();
    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left question">Do you own a car?</div>
			<div class="right answer">
				<div class="leftradio">
					<label>Yes</label>
					<input type="radio" id="yes1" value="yes1" name="iCheck1">
					</input>
				</div>
				<div class="rightradio">
					<label>No</label>
					<input type="radio" id="no1" name="iCheck1">
					</input>
				</div>
			</div>
		<div class="right">
		<div class="left question">Has someone lived with you for at least 6months within the last 4 years?</div>
			<div class="right answer">
				<div class="leftradio">
					<label>Yes</label>
					<input type="radio" id="yes2" value="yes2" name="iCheck2">
					</input>
				</div>
				<div class="rightradio">
					<label>No</label>
					<input type="radio" id="no2" name="iCheck2">
					</input>
				</div>
			</div>
		</div>	
	<div class="row">
		<div class="left">
	<div class="left question">Do you have home insurance?</div>
			<div class="right answer">
				<div class="leftradio">
					<label>Yes</label>
					<input type="radio" id="yes3" value="yes3" name="iCheck3">
					</input>
				</div>
				<div class="rightradio">
					<label>No</label>
					<input type="radio" id="no3" name="iCheck3">
					</input>
				</div>
			</div>
		</div>
		<div class="right">
		<div class="left question">Do you spend more than around £400 per month on bills?</div>
			<div class="right answer">
				<div class="leftradio">
					<label>Yes</label>
					<input type="radio" id="yes4" value="yes4" name="iCheck4">
					</input>
				</div>
				<div class="rightradio">
					<label>No</label>
					<input type="radio" id="no4" name="iCheck4">
					</input>
				</div>
			</div>
		</div>	
    </div>
	
   <div class="row">
		<div id="correct">
			<div class="boxtext">
			YOU QUALIFY!</div>
		</div>
		<div id="incorrect"><div class="boxtext"><span style="font-weight:bold">X</span> 		SORRY BUT YOU DON'T QUALIFY!</div></div>
	</div>

＆＃13;

＆＃13;

＆＃13;

代码段没有颜色，但jsfiddle有here