I need, when the .checked class is present, to insert text-decoration: line-through; style to .todo-name
(I never understood if it is possible to do it with css, but in case I can also use js as a last chance)
<label class="checkbox-container" for="0"><span class="todo-name">Todo</span>
<input onclick="updateStatus(this)" type="checkbox" id="0" checked="">
<span class="checkmark checked"></span>
</label>
<!--This content does not have .checked and should not change-->
<label class="checkbox-container" for="0"><span class="todo-name">Todo</span>
<input onclick="updateStatus(this)" type="checkbox" id="0">
<span class="checkmark"></span>
</label>
<style>
/*.todo-name{text-decoration: line-through;}*/
/*Not working*/
/*
.checkbox-container .checked ~ .todo-name {
text-decoration: line-through;
}
.checkbox-container:not(.checked) .todo-name {text-decoration: line-through;}
*/
</style>
Codepen project
The end result should look like this
You've got a couple issues going on here. As mentioned in a comment, you should be using a pseudo-class, if you don't want to use JavaScript. :checked in this example.
Next, you are using the CSS selector ~, which selects a sibling that comes after the element, not before. So trying to select .todo-name with the selector #0:checked ~ .todo-name will not work due to the name coming before the checkbox.
Below is an example of a working version.
input:checked ~ .todo-name {
text-decoration: line-through;
}
<label class="checkbox-container" for="checkbox">
<input type="checkbox" id="checkbox" checked="">
<span class="todo-name">Todo</span>
</label>
<label class="checkbox-container" for="checkbox2">
<input type="checkbox" id="checkbox2">
<span class="todo-name">Todo</span>
</label>
Related
I have divs that contain 1 checkbox within it. Whenever I click the div, it will change the class name of the div. Additionally, I want to check & uncheck the tags while changing the class name of the div.
$(".tags").click(function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).addClass("inactive");
} else if ($(this).hasClass("inactive")) {
$(this).removeClass("inactive");
$(this).addClass("active");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.active{
color: green;
}
.inactive{
color: red;
}
</style>
<div class="tags active" name="item1"> Item1 <input type="checkbox" name="item1"></div>
<div class="tags active" name="item2"> Item2 <input type="checkbox" name="item2"></div>
<div class="tags active" name="item3"> Item3 <input type="checkbox" name="item3"></div>
How do I find a checkbox inside it each div and check/uncheck will clicking on the div?
You can do it much shorter:
$(".tags").click(function () {
$(this).toggleClass("active inactive")
.find("input:checkbox").prop("checked",$(this).hasClass("active"))
})
.active {background-color: yellow}
.inactive {border: 1px solid red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags inactive" name="item1"> Item1 <input type="checkbox" name="item1"></div>
<div class="tags inactive" name="item2"> Item2 <input type="checkbox" name="item2"></div>
<div class="tags inactive" name="item3"> Item3 <input type="checkbox" name="item3"></div>
Update:
I changed from .attr() to prop() since otherwise I had problems when changing the checkbox directly. In this context it did not matter whether I used the mouse or the keyoard.
This might not be the thing you're after but in this case it might be the better way. <label> has a property for which links it to an input automatically. This method is potentially more accessible (because the browser understands what is going on) and because it is not depending on click events there are no gotchas when toggling the checkbox with your keyboard.
$(".tags input").change(function() {
if (this.checked)
$(this).parents(".tags").addClass("active").removeClass("inactive");
else
$(this).parents(".tags").removeClass("active").addClass("inactive");
});
.active {
color: green;
}
.inactive {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags inactive" name="item1">
<label for="item1">Item1</label>
<input type="checkbox" id="item1" />
</div>
<div class="tags inactive" name="item2">
<label for="item2">Item2</label>
<input type="checkbox" id="item2" />
</div>
<div class="tags inactive" name="item3">
<label for="item3">Item3</label>
<input type="checkbox" id="item3" />
</div>
You just need to search the clicked element for the checkbox descendant and toggle its .checked property.
Additionally, you don't really need an inactive class. Inactive is just the normal style and only when an element becomes active do you need to override the default. When it's no longer active, you just remove that class and revert back to the default.
$(".tags").click(function () {
// Find the input within the clicked div and
// set its checked property to the opposite
// of what it currently is.
$(this).find("input").prop("checked", !$(this).find("input").prop("checked"));
// Toggle the active class
$(this).toggleClass("active");
});
div.active {background-color: yellow; border: 0;}
.tags {border: 1px solid red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tags"> Item1 <input type="checkbox" name="item1"></div>
<div class="tags"> Item2 <input type="checkbox" name="item2"></div>
<div class="tags"> Item3 <input type="checkbox" name="item3"></div>
When tabbing through a list of checkboxes I want to see the outline of a checkbox around the whole label. The code I have just puts the outline on the input itself:
<label class="b-label" data-selected-value="Hello" data-selected-display-name="Hello">
<span class="b-checkbox">
<input class="b-input" name="Hello" type="checkbox" value="Hello">
</span>
<span class="b-text-wrap">
<span class="b-text">Hello</span><span class="b-count">12</span>
</span>
</label>
Codepen: https://codepen.io/anon/pen/gyeGZG
The idea is to make the checkboxes as accessible as possible for keyboard users etc.
Cheers
You don't need JS to do this, CSS can manage it.
:focus-within
The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)
MDN
Support is non-IE/Edge, although the latter may change when Edge switches to Chromium-based
body {
text-align: center;
}
.b-label {
margin:1em;
display: inline-block;
padding:.25em;
}
.b-label:focus-within {
outline :1px solid red;
}
<label class="b-label" data-selected-value="Hello" data-selected-display-name="Hello">
<span class="b-checkbox">
<input class="b-input" name="Hello" type="checkbox" value="Hello">
</span>
<span class="b-text-wrap">
<span class="b-text">Hello</span><span class="b-count">1</span>
</span>
</label>
<label class="b-label" data-selected-value="Hello" data-selected-display-name="Hello">
<span class="b-checkbox">
<input class="b-input" name="Hello" type="checkbox" value="Hello">
</span>
<span class="b-text-wrap">
<span class="b-text">Hello</span><span class="b-count">2</span>
</span>
</label>
<label class="b-label" data-selected-value="Hello" data-selected-display-name="Hello">
<span class="b-checkbox">
<input class="b-input" name="Hello" type="checkbox" value="Hello">
</span>
<span class="b-text-wrap">
<span class="b-text">Hello</span><span class="b-count">3</span>
</span>
</label>
I was able to make a single materialize switch and it looks great, but now I want a second switch - with a different color setup than my first one. This is the code I want to run, but my switches just disappear when I try to change the class name!! Any help would be greatly appreciated!!!
HTML:
<div class="switch-1" align="center">
<label>
1 OFF
<input id="Switch1" type="checkbox">
<span class="lever"></span>
1 ON
</label>
</div>
<div class="switch-2" align="center">
<label>
2 OFF
<input id="Switch2" type="checkbox">
<span class="lever"></span>
2 ON
</label>
</div>
CSS:
.switch-1 label .lever {
background-color: #79ff4d;
}
.switch-1 label input[type=checkbox]:checked+.lever {
background-color: #ff6666;
}
.switch-1 label input[type=checkbox]:checked+.lever:after {
background-color: #ff3300;
}
.switch-2 label .lever {
background-color: #79ff4d;
}
.switch-2 label input[type=checkbox]:checked+.lever {
background-color: #a6a6a6;
}
.switch-2 label input[type=checkbox]:checked+.lever:after {
background-color: #737373;
}
Try this:
<div class="switch red" align="center">
<label>
1 OFF
<input id="Switch1" type="checkbox">
<span class="lever"></span>
1 ON
</label>
</div>
<div class="switch grey" align="center">
<label>
2 OFF
<input id="Switch2" type="checkbox">
<span class="lever"></span>
2 ON
</label>
</div>
with this CSS:
.switch.red label .lever {
background-color: #79ff4d;
}
.switch.red label input[type=checkbox]:checked+.lever {
background-color: #ff6666;
}
.switch.red label input[type=checkbox]:checked+.lever:after {
background-color: #ff3300;
}
.switch.grey label .lever {
background-color: #79ff4d;
}
.switch.grey label input[type=checkbox]:checked+.lever {
background-color: #a6a6a6;
}
.switch.grey label input[type=checkbox]:checked+.lever:after {
background-color: #737373;
}
switch is the class that materialize uses to set the aspect of the element, use another class and leave the switch class too.
<div class="switch switch-1" align="center">
<label>
1 OFF
<input id="Switch1" type="checkbox">
<span class="lever"></span>
1 ON
</label>
</div>
<div class="switch switch-2" align="center">
<label>
2 OFF
<input id="Switch2" type="checkbox">
<span class="lever"></span>
2 ON
</label>
</div>
I'm trying to implement a plans page. In this page a user can only select one plan obviously. So I have a form that has radio buttons representing each plan. But Radio buttons are ugly right!? So I'm trying to hide them behind a regular a href styled nicely. Is it possible to have an a href actually select a radio button on it's behalf? Here is my code:
HTML:
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug" value="trial" />
Select
</label>
So for for the radio button I'm use display: none; to hide the radio button then trying to select that button when a user clicks the a href that below the radio button. How can I achieve this?
You can add a class to all checkbox example check. Looking at the structure of your html, if the input sibling is next to the anchor tag you can add a click event to all anchor.when the event fires, the anchor will check their sibling-checkbox.
Snippet below without the checkbox hidden
all_anchor=document.getElementsByClassName("button");
for(var x=0;x<all_anchor.length;++x){
all_anchor[x].addEventListener("click",function(){
this.previousElementSibling.checked=true;
})
}
a{
padding:30px;
background:red;
border:solid red;
border-radius:10px;
text-decoration:none;
}
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug1" value="trial" class="check"/>
Select
</label>
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug2" value="trial" class="check"/>
Select
</label>
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug3" value="trial" class="check"/>
Select
</label>
Snippet below where all input box are hidden but checked by the anchor tag
all_anchor = document.getElementsByClassName("button");
for (var x = 0; x < all_anchor.length; ++x) {
all_anchor[x].addEventListener("click", function() {
this.previousElementSibling.checked = true;
console.log("input sibling is checked")
})
}
a {
padding: 30px;
background: red;
border: solid red;
border-radius: 10px;
text-decoration: none;
}
.check {
display: none;
}
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug1" value="trial" class="check"/>
Select
</label>
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug2" value="trial" class="check"/>
Select
</label>
<label class="plans__trial__actions">
<input type="radio" id="trial" name="slug3" value="trial" class="check"/>
Select
</label>
want to remove radio button class false if parent div class s1 found.
<div class="s1">
<span>
<input name="question0" checked type="radio" value="C" class="false">
</span>
</div>
my script
$('.s1:has(input:radio:checked)').removeClass('false');
You can simple selector, nothing special is required.
$('.s1 :radio').removeClass('false');
jQuery(function($) {
$('.s1 :radio').removeClass('false');
});
.false {
background-color: blue;
height: 50px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="s1">
<span>
<input name="question0" checked type="radio" value="C" class="false">
</span>
</div>
<div class="s2">
<span>
<input name="question0" checked type="radio" value="C" class="false">
</span>
</div>
try this for just radio whether checked or not
$(".s1 input[type='radio']").removeClass('false');
And this one for only checked radio
$(".s1 input[type='radio']:checked").removeClass('false');
If the only reason is to alter the way the radio buttons looks, using jQuery is not really the normal way.
Here is an example without using jQuery, it's just been targeted in CSS instead.
.s2 .false {
height: 50px;
width: 100px;
}
<div class="s1">
<input name="question0"
checked type="radio"
value="C"
class="false">
</div>
<div class="s2">
<input name="question0"
checked
type="radio"
value="C"
class="false">
</div>