changing css on click on checkbox with jquery

Question

Here I'm trying to change the css of appended item having class as '.item', on click into checkbox . What's happening over here is: when I'm clicking the added item the css('line-through') is applied; instead I want css to be applied when only I click checkbox.

I tried running the individual queries via console and it returned correct value but its not displaying the write css.

function entervalue()
{
  var text = $('#inputext').val();
      $("#list").append('<div class="item"> <input type="checkbox"> ' + text + '</div>');
  $("#inputext").val('');
}



$(document).ready(function(){

$('#inputext').keyup(function(b)
{

if (b.keyCode===13)
{
  entervalue();
}

})
});
$(document).on('click', '.item', function() {
  if ($(this).css('textDecoration') == 'line-through')
  {
    $(this).css('textDecoration', 'none');
  }
  else

  {
      $(this).css('textDecoration', 'line-through');
  }

});

body {
    font: 14px 'Helvetica Neue';
    line-height: 1.4em;
    background: #f5f5f5;
    color: #4d4d4d;
    margin: 0 auto;
}

#inputext {
  background: white;
  font-size: 42px;
  margin-left: 2%;
  margin-top: 1%;
  position: fixed;
  border-style: inset;
  border-color: floralwhite;
  width: 26%;
}


#app{
  background-color: aliceblue;
  width: 72%;
  height: 70%;
  border-bottom-style:inset;
  border-width: thick;
  border-radius: 3%;
  margin-left: 13%;
  margin-top: 19%;
}

#item1{
  font-weight: 500;
}
.item{
  font-size: 20px;
      border-bottom: solid darkcyan;
      margin-bottom: 5%;
      margin-top: 6%;
      margin-right: 3%;
      margin-left: -5%;

}
.maincontent{

  background-color: darkseagreen;
  margin-top: 6%;
  margin-left: 36%;
  height: 60%;
  width: 30%;
  position: fixed;
  border-style: groove;
  border-width: thick;
  border-radius: 5%;

}
.strikeThrough{
  text-decoration:line-through;
}

  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="maincontent">

<input type="text" id="inputext" placeholder="todos"/>
<div id="app">
<ul id="list">

</ul>
</div>
</div>

function entervalue()
{
  var text = $('#inputext').val();
      $("#list").append('<div class="item"> <input type="checkbox"> ' + text + '</div>');
  $("#inputext").val('');
}



$(document).ready(function(){

$('#inputext').keyup(function(b)
{

if (b.keyCode===13)
{
  entervalue();
}

})
});
$(document).on('click', '.item', function() {
  if ($(this).css('textDecoration') == 'line-through')
  {
    $(this).css('textDecoration', 'none');
  }
  else

  {
      $(this).css('textDecoration', 'line-through');
  }

});

textDecoration should be text-decoration no?

Callam
– Callam

2016-09-10 11:14:36 +00:00
Commented Sep 10, 2016 at 11:14 — Callam
– Callam, Commented Sep 10, 2016 at 11:14
It's text-decoration , here you go.

pol
– pol

2016-09-10 11:15:44 +00:00
Commented Sep 10, 2016 at 11:15 — pol
– pol, Commented Sep 10, 2016 at 11:15

gavgrif · Accepted Answer · 2016-09-10 11:30:10Z

1

Not sure about the "appended item" comment in your post - are you adding content to the DOM after the page has loaded? in which case you will need to designate the click event handler ($(document).on('click','textCheckbox...' etc).

The following is a better alternative to altering the the css on a single element - you designate a class (with the CSS of the strike though)and then toggle it on the checkbox state.

$(document).ready(function(){
      $('#textCheckbox').on('click',function(){
       if($(this).is(':checked'))        {$('.item').addClass('strikeThrough')}
       else{$('.item').removeClass('strikeThrough')}
});
    })

.strikeThrough{text-decoration:line-through}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Checkbox
  <input type="checkbox" id="textCheckbox">
</label>

<p class="item">TEST CONTENT</p>

you can even abbreviate this by using .toggleClass() as follows (simply toggles the line-through class on each click of the checkbox.:

$(document).ready(function(){
      $('#textCheckbox').on('click',function(){
       $('.item').toggleClass('strikeThrough')
});
    })

.strikeThrough{text-decoration:line-through}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Checkbox
  <input type="checkbox" id="textCheckbox">
</label>

<p class="item">TEST CONTENT</p>

edited Sep 10, 2016 at 11:30

answered Sep 10, 2016 at 11:24

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gaurav Soni Over a year ago

i tried making changes as suggested , but still query is same.

Ganesh Putta · Accepted Answer · 2016-09-10 11:16:00Z

0

may be this will help you

$(":checkbox").on("change", function() {
    var that = this;
    $('.txt-class').css("background-color", function() {
        return that.checked ? "#ff0000" : "";
    });
  
   $('.txt-class').css("textDecoration", function() {
        return that.checked ? "line-through" : "";
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input type='checkbox' name='groupid' value='1'>1</div>
<div class="txt-class">
Ganesh Putta
</div>

answered Sep 10, 2016 at 11:16

Ganesh Putta

2,6872 gold badges22 silver badges27 bronze badges

3 Comments

Gaurav Soni Over a year ago

i tried making changes as suggested , but still query is same.

Ganesh Putta Over a year ago

oh really...my code is working properly..then add your code to snippet, then i will change there

Ganesh Putta Over a year ago

dude i asked you to copy your code to snippet, so that it is easy to solve

Shubham Khatri · Accepted Answer · 2016-09-10 11:25:06Z

0

Use the onchange event handler on the checkbox and to check whether the checkbox is checked use $('input[type=checkbox]').prop('checked')

$('input[type=checkbox]').on('change', function(){
  if($(this).prop('checked')){
     console.log($('.item').css('textDecoration'));
  if ($('.item').css('textDecoration') == 'line-through')
  {
    $('.item').css('textDecoration', 'none');
  }
  else

  {
      $('.item').css('textecoration', 'line-through');
  }
  }
 

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<div class="item" >Hello World</div>

If you want the item having class .item to have css line-through when checkbox checked and not to when checkbox is unchecked. This is what you need

$('input[type=checkbox]').on('change', function(){
  if($(this).prop('checked')){
     
  
      $('.item').css('text-decoration', 'line-through');
  }
  
  else {
      
     $('.item').css('text-decoration', 'none');
  }
 

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<div class="item" >Hello World</div>

edited Sep 10, 2016 at 11:25

answered Sep 10, 2016 at 11:13

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

1 Comment

Gaurav Soni Over a year ago

i tried making changes as suggested , but still query is same.

caldera.sac · Accepted Answer · 2016-09-10 12:19:34Z

try below. NOTE : in your case textDecoration should be text-decoration

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style type="text/css">



</style>

<body>

<input type="checkbox"> Pick me
 <p>I'm under him</p>

</body>

<script type="text/javascript">

$(document).ready(function(){
  $("input[type='checkbox']").on('change',function(){
    var is_it_checked = $(this).prop("checked");//check the checkbox is checked or not

    //according to the condition, do the styles with if condition like below
    if (is_it_checked == true) 
      {
        $("p").css({"text-decoration":"line-through"});
      }
     else
     {
       $("p").css({"text-decoration":"none"});
     }


  });
});

</script>

</html>

AtulBhatS · Accepted Answer · 2016-09-11 09:12:24Z

0

Try this.

$('.checkbox').on('click', function(){
    if($(this).prop('checked')){
        $(this).parent().find('.item').css('text-decoration','line-through');
    }         
    else {
        $(this).parent().find('.item').css('text-decoration','none');
    }
});

<script src="https://code.jquery.com/jquery-2.1.2.min.js"></script>
<div class="check-label"><input type="checkbox" class="checkbox" /><span class="item">Pick up Comic Books</span></div>
<div class="check-label"><input type="checkbox" class="checkbox" /><span class="item">Cook Dinner</span></div>

By putting the text and the checkbox inside the label tag, you can check the item by simply click on the text as well.

Edit: Updates made as per OP's comment

edited Sep 11, 2016 at 9:12

answered Sep 10, 2016 at 11:40

AtulBhatS

1812 silver badges12 bronze badges

4 Comments

Gaurav Soni Over a year ago

i tried making changes as suggested , but still query is same.

AtulBhatS Over a year ago

Could you explain more? What do you mean by query is same ? Does it not strike through but gets checked? does it strike through?

Gaurav Soni Over a year ago

The css is applied but i want css to be applied only if I check the checkbox, right now if I click on the input text also the css gets applied

AtulBhatS Over a year ago

@GauravSoni I've updated the answer. Try now. The CSS changes only when the checkbox is clicked and not the task text.

Collectives™ on Stack Overflow

changing css on click on checkbox with jquery

5 Answers 5

1 Comment

3 Comments

1 Comment

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

1 Comment

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related