Fancy checkbox for web pages

I just finished creating a fancy checkbox and am hoping for some tips to help improve my code, as I am still learning.



$(document).ready(function(){
function checkbox(){
var y = $("#yon");
var n = $("#non");
var cx = $("#chex")
var cbx = $("#checkbox");
var chval = false;
$(".cspan").click(function(){
$(n).toggleClass("no");
$(y).toggleClass("yes");
if(chval){
$(cx).text("\u2716");
$(cbx).prop('checked', false);
chval = false;
}
else{
$(cx).text("\u2714");
$(cbx).prop('checked', true);
chval = true;
}
});
}
checkbox();
});
#checkcon p{

}
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] + label span {
display:inline-block;
width: 160px;
height: 60px;
border-radius: 25px;
margin:-1px 4px 0 0;
vertical-align:middle;
background-color: #ff3a31;
cursor:pointer;
transition: background-color 100ms linear;
position:absolute;
}
input[type="checkbox"]:checked + label span {
background-color: #00cc66;
transition: background-color 100ms linear;

}
input[type="checkbox"] {

}
.checkemb{
position:relative;
display:inline-block;
margin-right:10px;
margin-left:10px;
font-family:"Arial Black", Gadget, sans-serif;
color:#ffffff;
}
#chex{
margin-right:25px;
margin-left:25px;

}
p.yes{
color:#990800;
transition: color 100ms linear;
}
p.no{
color:#008040;
transition: color 100ms linear;
}





Yes&#10006 No



A few points:

• You don't need to declare the checkbox function within the $(document).ready(), you can do it outside it.

• You have some empty CSS rules -- by accident?

• $(function() {...}); is a shorthand for $(document).ready(function() {...}); -- you might want to use that if you want

• You don't need to do $(y), $(n), because you saved y, n as jQuery objects already

• When you make the variables y, n, cx, cbx, you can opt to (at the end of the day, it's personal preference, but makes it clear they are 'special' variables) prepend $ (or jQuery) like var $y = $("#yon"), var $n = $("#non"), and so on..., so you know they're jQuery objects.

With that in mind...:



function checkbox() {
var $y = $("#yon");
var $n = $("#non");
var $cx = $("#chex")
var $cbx = $("#checkbox");
var chval = false;
$(".cspan").click(function() {
$n.toggleClass("no");
$y.toggleClass("yes");
if (chval) {
$cx.text("\u2716");
$cbx.prop('checked', false);
chval = false;
} else {
$cx.text("\u2714");
$cbx.prop('checked', true);
chval = true;
}
});
}

$(function() {
checkbox();
});
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label span {
display: inline-block;
width: 160px;
height: 60px;
border-radius: 25px;
margin: -1px 4px 0 0;
vertical-align: middle;
background-color: #ff3a31;
cursor: pointer;
transition: background-color 100ms linear;
position: absolute;
}
input[type="checkbox"]:checked + label span {
background-color: #00cc66;
transition: background-color 100ms linear;
}
.checkemb {
position: relative;
display: inline-block;
margin-right: 10px;
margin-left: 10px;
font-family: "Arial Black", Gadget, sans-serif;
color: #ffffff;
}
#chex {
margin-right: 25px;
margin-left: 25px;
}
p.yes {
color: #990800;
transition: color 100ms linear;
}
p.no {
color: #008040;
transition: color 100ms linear;
}






Yes
&#10006

No



StackExchange Code Review Q#124575, answer score: 3