用jquery点击复选框改变css

Question

在这里，我试图在单击复选框时更改具有类为“.item”的附加项目的 css。 这里发生的事情是：当我点击添加的项目时，css('line-through') 被应用；相反，我希望仅在单击复选框时应用 css。

我尝试通过控制台运行单个查询，它返回了正确的值，但它没有显示写入 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');
  }

});

Answer 1

不确定您帖子中的“附加项目”评论 - 您是否在页面加载后向 DOM 添加内容？在这种情况下，您需要指定点击事件处理程序（$(document).on('click','textCheckbox...' 等）。

以下是更改单个元素上的 css 的更好替代方法 - 您指定一个类（尽管使用罢工的 CSS），然后将其切换到复选框状态。

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

您甚至可以使用 .toggleClass() 来缩写它，如下所示（只需在每次单击复选框时切换 line-through 类。：

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

Answer 2

也许这会对你有所帮助

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

Answer 3

在复选框上使用 onchange 事件处理程序并检查复选框是否被选中使用$('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>

如果您希望具有 .item 类的项目在选中复选框时具有 css 直通，而不是在未选中复选框时。这就是你需要的

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

Answer 4

试试下面。 注意：在你的情况下 textDecoration 应该是 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>

Answer 5

试试这个。

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

通过将文本和复选框放在标签标签内，您也可以通过单击文本来检查项目。

编辑：根据 OP 的评论进行更新