изменение css при нажатии на флажок с jquery

Question

Здесь я пытаюсь изменить css добавленного элемента, имеющего класс как .item, при щелчке на флажке. Что происходит здесь: когда я нажимаю на добавленный элемент, применяется 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

Используйте 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 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

Не уверен, что о "приложенном пункта" комментарий в вашем сообщении - вы добавляете контент в DOM после загрузки страницы? в этом случае вам нужно будет назначить обработчик события click ($ (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(), как (просто переключает линейный класс при каждом щелчке флажка .:

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

Попробуйте это.

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

Поставив текст и флажок внутри тега этикетки, вы можете проверить деталь просто нажмите на текст, а также.

Edit: Обновление сделано согласно комментарий OP в

Answer 5

попробовать ниже. Примечание: в вашем случае textDecoration должен быть текст-украшение

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