changing css on click on checkbox with jquery
<p>Here I'm trying to change the css of appended item having class as '.item', on click into checkbox .
<strong><em>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.</em></strong> </p>

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

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function entervalue()
{
  var text = $('#inputext').val();
      $("#list").append('&lt;div class="item"&gt; &lt;input type="checkbox"&gt; ' + text + '&lt;/div&gt;');
  $("#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');
  }

});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;

&lt;div class="maincontent"&gt;

&lt;input type="text" id="inputext" placeholder="todos"/&gt;
&lt;div id="app"&gt;
&lt;ul id="list"&gt;

&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<pre><code>function entervalue()
{
  var text = $('#inputext').val();
      $("#list").append('&lt;div class="item"&gt; &lt;input type="checkbox"&gt; ' + text + '&lt;/div&gt;');
  $("#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');
  }

});
</code></pre>