用jquery点击复选框改变css

Posted 2023-05-08

【中文标题】用jquery点击复选框改变css

【英文标题】：changing css on click on checkbox with jquery

【发布时间】：2017-01-18 10:05:58

【问题描述】：

在这里，我试图在单击复选框时更改具有类为“.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');
  

);

【问题讨论】：

textDecoration 应该是text-decoration 否？

我是text-decoration，here you go.

【参考方案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')
);
    )

.strikeThroughtext-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')
);
    )

.strikeThroughtext-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>

【讨论】：

我尝试按照建议进行更改，但查询仍然相同。

【参考方案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>

【讨论】：

我尝试按照建议进行更改，但查询仍然相同。

哦真的...我的代码工作正常..然后将您的代码添加到sn-p，然后我会在那里进行更改

哥们，我让你把你的代码复制到sn-p，这样很容易解决

【参考方案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>

【讨论】：

我尝试按照建议进行更改，但查询仍然相同。

【参考方案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>

【参考方案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 的评论进行更新

【讨论】：

我尝试按照建议进行更改，但查询仍然相同。

你能解释更多吗？ query is same 是什么意思？它没有通过但被检查吗？有没有突破？

已应用 css，但我希望仅在选中复选框时应用 css，现在如果我单击输入文本也应用 css

@GauravSoni 我已经更新了答案。现在试试。 CSS 仅在单击复选框而不是任务文本时更改。