Сделал, чтобы при нажатии на checkbox к элементу списка добавлялся класс "checked". Но почему-то не работает.
И как сделать, чтобы при нажатии на "Выделить все" выделялось все?
$('#list .toggle').on('click', 'input.checkbox', function() {
$('li').toggleClass('checked')
});
#toggle-all {
width: 60px;
height: 34px;
text-align: center;
border: none;
transform: rotate(90deg);
-webkit-appearance: none;
background: none;
}
#toggle-all::before {
content: "❯";
font-size: 22px;
color: #49f;
padding: 10px 27px;
}
#list {
margin: 0;
padding: 0;
list-style: none;
}
#list li {
position: relative;
font-size: 24px;
border-top: 1px solid #49f;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
#list li:last-child {
border-bottom: 1px solid #49f;
}
#list li .toggle {
text-align: center;
height: 40px;
width: 40px;
position: absolute;
top: 0;
left: 5px;
bottom: 0;
margin: auto 0;
border: none;
-webkit-appearance: none;
}
#list li .toggle:checked:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}
#list li .toggle:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>')
}
#list li label {
box-sizing: border-box;
white-space: pre-line;
word-break: break-all;
padding: 15px 60px 15px 15px;
margin-left: 45px;
display: block;
line-height: 1.2;
transition: color 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p>
<input id="toggle-all" type="checkbox"> Выделить все
</p>
<ul id="list">
<li>
<div class="task">
<label> <input class="toggle" type="checkbox">First</label>
</div>
</li>
<li>
<div class="task">
<label> <input class="toggle" type="checkbox">Second</label>
</div>
</li>
<li>
<div class="task">
<label> <input class="toggle" type="checkbox">Third</label>
</div>
</li>
</ul>
input.checkbox
не будет работать, потому что нет ни одного инпута с классомcheckbox