How can i check class in css with checbox in Laravel? - php

Question

So i want to change css class in HTML with checkbox. I know how boolean works, but how can i change text. For example, if checkbox is checked i want to inject "pull-right" class, and if it's not, then "pull-left" is defaulf.
I tried few things, but it wont work. Anyone knows how to create this?

Answer 1

You can try doing it like this:
Sample HTML:
<div id="container" class="pull-left">Some Content </div>
<input type="checkbox" id="mybox"/>
Sample Javascript
$("#mybox").on("change", function(){
$('#container').toggleClass("pull-left").toggleClass("pull-right");
})
Working sample on jsfiddle

Answer 2

I don't see any jquery tag to your question. so let me give you pure javascript solution:
fiddle: http://jsfiddle.net/Nz8Tq/
html:
<input type="checkbox" name="change" id="change"/>change class
<div class="pull-left" id="container"></div>
javascript:
document.getElementById("change").onchange = function(){
if(this.checked){
document.getElementById("container").setAttribute("class","pull-right");
} else {
document.getElementById("container").setAttribute("class","pull-left");
}
}

Answer 3

CSS only Demo
The :checked pseudo-class in CSS selects elements when they are in the selected state. It is only associated with input <input> elements of type radio and checkbox . The :checked pseudo-class selector matches radio and checkbox input types when checked or toggled to an on state. If they are not selected or checked, there is no match.
Browser Support
Chrome Safari Firefox Opera IE Android iOS
Any 3.1+ Any 9+ 9+ any any
source
CSS
input[type=checkbox] ~ div { /* I used general sibling selector u can use other css selectors according to ur requirement like adjacent sibling, child selector etc */
color: #ccc;
font-style: italic;
float: left
}
input[type=checkbox]:checked ~ div {
color: #f00;
font-style: normal;
float: right
}
input[type=checkbox] {
position: fixed;
}
HTML
<input type="checkbox" id="chkbx" name="chkbx">
<br>
<div for="chkbx">The power of css</div>

Answer 4

You can do it easily by doing this:
Jquery
$(function(){
$("input[name=toggle-checkbox]").on("change", function(){
$(".test").toggleClass("pull-left").toggleClass("pull-right");
});
});
Then in your html add this:
<input name="toggle-checkbox" type="checkbox" />
<div class="test pull-left"></div>
And a bit of css to see the effect:
.test{
display:block;
width:100px;
height:100px;
}
.pull-left{
background-color:red;
}
.pull-right{
background-color:yellow;
}
I hope this helps!!! :)