Question

您好我创建了包含一些数据的3行，每行有4个复选框

<!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(){
    array=[c,f,i,n,s];
$("input").click(function(){
$(this).next().addClass("fa-check tick");
});
});

我怀疑当我点击这些复选框（c，f，i，n，s）时，它应该显示刻度线。如果我单击除此之外的复选框（c，f，i，n，s），它应显示交叉标记

这是我的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;
}

Answer 1

使用.inArray()作为您的背景。

$(document).ready(function(){
 var arr =['c','f','i','n','s'];
$("input[type=checkbox]").click(function(){
    if (this.checked) {
       if($.inArray(this.value, arr) > -1) {
         $(this).next().addClass("fa-check tick");
       } else {
         $(this).next().addClass("fa-check cross");
       }
    } else {
       $(this).next().removeClass("fa-check tick cross");
      }
});
});

.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;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.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>

Answer 2

像这样使用数组indexOf函数

$(document).ready(function () {
           var array = ['c', 'f', 'i', 'n', 's'];
           $("input[type='checkbox']").click(function () {
               var value = $(this).val();
               var find = array.indexOf(value);
               if(find != -1){
                   $(this).next().addClass("fa-check tick");
               } else {
                   $(this).next().addClass("fa fa-window-close tick");
               }

            });
        });

<强>输出：

Answer 3

我认为您无法更改复选框元素的默认符号。

Answer 4

 Hi Try This Code... 
   $(document).on('click', 'input', function(){
		$(this).next().addClass("fa-check tick");
	});

Answer 5

$.inArray会有所帮助。

var array = ["c", "f", "i", "n", "s"];
$.inArray(this.value, array) >= 0

这将给出数组中是否存在值。 details

完整JS代码

$(document).ready(function() {
  var array = ["c", "f", "i", "n", "s"];
  $("input").click(function() {
    if (this.checked)
      $(this).next().addClass($.inArray(this.value, array) >= 0 ? "fa-check tick" : "fa-check cross");
    else
      $(this).next().removeClass("fa-check tick cross");
  });
});

CSS也有小修改

.questions {
  margin-right: 5%;
  font-size: 18px;
  float: right;
}

input[type="checkbox"] {
  width: 25px;
  height: 25px;
  vertical-align:middle;
}

span {
  padding-left: 10%;
}

.marginTop {
  margin-top: 14px;
}

#marginTop {
  margin-top: 6px;
}

.calculator {
  min-height: 25px;
}

.fa {
  font-size: 1em;
  display: inline-block;
  vertical-align:middle;
}

.tick:before {
  color: #008000;
  content: '\2713';
}

.cross:before {
  color: red;
  content: 'X';
}

你可以查看这个工作小提琴here

动态添加点击事件的css

5 个答案: