CODEWITHSUNDEEP
jquery
moksha
moksha

Reputation: 47

Adding css for click event dynamically

Hi i have created 3 rows with some data,each row has 4 checkboxes

<!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>

I have stored some value of some checkboxes in an array

$(document).ready(function(){
    array=[c,f,i,n,s];
$("input").click(function(){
$(this).next().addClass("fa-check tick");
});
});

My doubt is when i click these check boxes(c,f,i,n,s)it should show tick mark. If i click checkboxes other than this(c,f,i,n,s)it should show cross mark

Here is my 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;
}

Upvotes: 0

Views: 65

Answers (5)

Ahmar
Ahmar

Reputation: 3867

Use array indexOffunction like this

$(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");
               }

            });
        });

Output: enter image description here

Upvotes: 1

Ranjit Singh
Ranjit Singh

Reputation: 3735

$.inArray will help here.

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

This will give you is the value exists in array or not. details

Full JS Code

$(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");
  });
});

There is small modification in CSS too

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

You can check out this working fiddle here

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15393

Use .inArray() for your context.

$(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>

Upvotes: 1

BalaMurugan.N
BalaMurugan.N

Reputation: 118

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

Upvotes: 0

Leonardo Lima
Leonardo Lima

Reputation: 140

I don't think you can change the default symbol of the checkbox element.

Upvotes: 0

Related Questions