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;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;body&gt;
  &lt;div id="checkcon"&gt;
    &lt;input id="checkbx" type="checkbox"/&gt;
    &lt;label for="checkbx"&gt;&lt;span class="cspan"&gt;&lt;/span&gt;&lt;/label&gt;
    &lt;p class="checkemb yes" id="yon"&gt;Yes&lt;/p&gt;&lt;p class="checkemb x" id="chex"&gt;&lt;strong&gt;&amp;#10006 &lt;/strong&gt;&lt;/p&gt;&lt;p class="checkemb" id="non"&gt;No&lt;/p&gt;  
  &lt;/div&gt;
&lt;/body&gt;
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;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;body&gt;
  &lt;div id="checkcon"&gt;
    &lt;input id="checkbx" type="checkbox" /&gt;
    &lt;label for="checkbx"&gt;&lt;span class="cspan"&gt;&lt;/span&gt;
    &lt;/label&gt;
    &lt;p class="checkemb yes" id="yon"&gt;Yes&lt;/p&gt;
    &lt;p class="checkemb x" id="chex"&gt;&lt;strong&gt;&amp;#10006 &lt;/strong&gt;
    &lt;/p&gt;
    &lt;p class="checkemb" id="non"&gt;No&lt;/p&gt;
  &lt;/div&gt;
&lt;/body&gt;