My Playlist

Choose the playlist with checkbox

by KingGeneral

HTML

<script src="https://code.jquery.com/jquery-1.x-git.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h3>My Playlist : (hover to choose)</h3>
<input type='checkbox' name='thing' value='valuable' id="thing1" class="pinmusic" checked/>
<label class="oper" for="thing1"> Play Playlist 1</label> - Music 1
<br>
<input type='checkbox' name='thing' value='valuable' id="thing2" class="pinmusic" />
<label class="oper" for="thing2"> Play Playlist 2</label> - Music 2
<br>
<input type='checkbox' name='thing' value='valuable' id="thing3" class="pinmusic" />
<label class="oper" for="thing3"> Play Playlist 3</label> - Music 3
<br>
<input type='checkbox' name='thing' value='valuable' id="thing4" class="pinmusic" />
<label class="oper" for="thing4"> Play Playlist 4</label> - Music 4
<br><br><br>

<label> This normal label not affected, so fine</label>

CSS

body:nth-of-type(1) input[type="checkbox"] {
  display: none;
}
body:nth-of-type(1) label.oper{
  color:transparent;
}

body:nth-of-type(1) input[type="checkbox"] + label.oper:before {
  content: "\00a0"; /* character: space */
  /* background: #999; */
  height: 16px;
  width: 16px;
  display: inline-block;
  font-size: 14px;
  line-height: 16px;
  margin-right: 10px;
  padding: 0 0 0 0px;
  text-align: center;
}
body:nth-of-type(1) input[type="checkbox"]:checked + label.oper{
	color: green;
  position: relative;
}
body:nth-of-type(1) input[type="checkbox"]:hover + label.oper:hover{
	color: grey;
  content:'Staff';
}
body:nth-of-type(1) input[type="checkbox"]:checked + label.oper:before {
  font-family: "FontAwesome";
  content: "\f144";
  color: green;
}
button {width:6em}
button:hover span {display:none}
button:hover:before {content:"Reply!"}

JavaScript

$(document).ready(function() {
  $('input.pinmusic').on('change', function() { //detect change 
    $('input.pinmusic').not(this).prop('checked', false); //auto uncheck
    
    //required Jquery
    //and fontawsome
  });
});