Question

这是我的代码

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="../font-awesome-4.6.3/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="../plug-in/jquery-3.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

    <center><h2>Test Your Programming Knowledge</h2></center>
    <div class="container">
        <section>
              <div class="col-xs-12 calculator"></div>
        </section>
        <div class="col-xs=12">
        <section class="col-sm-6">
              <div class=" questions">
                    <div class="marginTop">1.Latest version of HTML</div>
                    <div class="marginTop">2.Latest version of CSS</div>
                    <div class="marginTop">3.Latest version of Android</div>
              </div>
        </section>
        <section class="col-sm-6">
             <div id="marginTop">
                    <input type="checkbox"  id="1" value="a"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="2" value="b"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="3" value="c"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="4" value="d"/><i class="fa"></i><span></span>
             </div>
              <div id="marginTop">
                    <input type="checkbox"  id="5" value="e"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="6" value="f"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="7" value="g"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="8" value="h"/><i class="fa"></i><span></span>
             </div>
              <div id="marginTop">
                    <input type="checkbox"  id="9" value="i"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="10" value="j"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="11" value="k"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="12" value="l"/><i class="fa"></i><span></span>
             </div>
        </section>
    </div>
    </div>
</body>
</html>

脚本

$(document).ready(function(){
 var arr=['c','f','i','n','s'];
$("input").click(function(){

if(this.checked){
    if($.inArray(this.value,arr)>-1){
        $(this).next().addClass("fa-check tick");
    }else{
        $(this).next().addClass("fa-times cross");
    }
}else{
    $(this).next().removeClass("fa-check times tick cross");
}
});
});

CSS

.questions{
margin-right: 5%;
font-size: 18px;
float: right;
}
input[type="checkbox"]{
width: 25px; 
height: 25px; 
}
span{
padding-left:10%;
}
.marginTop{
margin-top: 14px;
}
#marginTop{
margin-top: 6px;
}
.calculator{
min-height: 25px;
}
.tick{
    font-size:1em;
    color:#008000;
}
.cross{
    font-size:1em;
    color:red;
}
button{
    margin-top: 25% !important;
    float:right !important;
}
.modal-content{
  width: 300px !important;
  height:100px !important;
  margin: 0 auto;
  top: 150px;
}

现在我已经添加了提交按钮和模态框。当我点击提交时，如果我选择了所有正确答案，它应该显示＆＃34;正确答案＆＃34;。如果我选择了任何错误的答案，它应该显示＆＃34;只选择正确答案＆＃34; ..i错过任何复选框以选择必须显示的答案＆＃34;选择答案＆＃34;。

为此我已经使用以下代码

function validate(){
    $('.modal-body').html('')
    if($("input .fa-check tick").length==5){
     $('.modal-body').append('<p><h4>Correct answers</h4></p>');
    }else{
     $('.modal-body').append('<p><h4>select answers</h4></p>');
    }
}

但它仅显示＆＃34;选择答案＆＃34;。有什么建议吗？

从这段代码中得到答案

$(document).ready(function(){
var arr=['c','f','i','n','s'];
$("input").click(function(){

if(this.checked){
    if($.inArray(this.value,arr)>-1){
        $(this).next().addClass("fa-check  tick");
        // $(this).siblings('input[type="checkbox"]').not(this).next().removeClass("fa-times cross");

    }else{
        $(this).next().addClass("fa-times cross");
        // $(this).siblings('input[type="checkbox"]').not(this).next().removeClass("fa-check tick");
    }
}else{
    //$(this).next().removeClass("fa-check times tick cross");
}
});
$('input[type="checkbox"]').on('change', function() {
   $(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});
});
function validate(){
    $('.modal-body').html('')
    if($(".tick").length===5){
     $('.modal-body').append('<p><h4>you have successfully answerd all the questions</h4></p>');
    }else{
     $('.modal-body').append('<p><h4>please choose correct answer for all the questions</h4></p>');
    }
}

Answer 1

问题出在您的选择器中：

 if($("input .fa-check tick").length==5){

您正在添加类.tick，并将其添加到i元素，而不是input。所以，这样的事情应该有效：

  if($(".tick").length==5){...

演示：

$(document).ready(function(){
 var arr=['c','f','i','n','s'];
$("input").click(function(){

if(this.checked){
    if($.inArray(this.value,arr)>-1){
        $(this).next().addClass("fa-check tick");
    }else{
        $(this).next().addClass("fa-times cross");
    }
}else{
    $(this).next().removeClass("fa-check times tick cross");
}
});
});


function validate(){
   alert($(".tick").length);
    if($(".tick").length==3){
     alert('Correct');
    }else{
    alert('nope');
    }
}

$( "button" ).on( "click", function() {
validate();
});

.questions{
margin-right: 5%;
font-size: 18px;
float: right;
}
input[type="checkbox"]{
width: 25px; 
height: 25px; 
}
span{
padding-left:10%;
}
.marginTop{
margin-top: 14px;
}
#marginTop{
margin-top: 6px;
}
.calculator{
min-height: 25px;
}
.tick{
    font-size:1em;
    color:#008000;
}
.cross{
    font-size:1em;
    color:red;
}
button{
    margin-top: 25% !important;
    float:right !important;
}
.modal-content{
  width: 300px !important;
  height:100px !important;
  margin: 0 auto;
  top: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center><h2>Test Your Programming Knowledge</h2></center>
  <button type="button">Validate</button>    
    <div class="container">
        <section>
              <div class="col-xs-12 calculator"></div>
        </section>
        <div class="col-xs=12">
        <section class="col-sm-6">
              <div class=" questions">
                    <div class="marginTop">1.Latest version of HTML</div>
                    <div class="marginTop">2.Latest version of CSS</div>
                    <div class="marginTop">3.Latest version of Android</div>
              </div>
        </section>
        <section class="col-sm-6">
             <div id="marginTop">
                    <input type="checkbox"  id="1" value="a"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="2" value="b"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="3" value="c"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="4" value="d"/><i class="fa"></i><span></span>
             </div>
              <div id="marginTop">
                    <input type="checkbox"  id="5" value="e"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="6" value="f"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="7" value="g"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="8" value="h"/><i class="fa"></i><span></span>
             </div>
              <div id="marginTop">
                    <input type="checkbox"  id="9" value="i"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="10" value="j"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="11" value="k"/><i class="fa"></i><span></span>
                    <input type="checkbox"  id="12" value="l"/><i class="fa"></i><span></span>
             </div>
            
        </section>
    </div>

    
    </div>

在jquery中验证的弹出消息

1 个答案: