Develop Reference

Highlighting with several colors on the table

I've asked for help about this work before, but I realized that I made a mistake. So here I have a working code to switch highlighting colors for the value selected on the table. I can change the color of highlighting with this code, but I can't highlight different values with different colors at the same time. here is a fiddle example: https://jsfiddle.net/vvhbvdyj/ and jquery code is below. I'd be glad if someone can help me with this. thanks.
// JavaScript Document
$(document).ready(function() {
$('.selector').each(function() {
$(this).on('click', check);
});
$('.all').each(function() {
$(this).on('click', all);
});
function all(event) {
if ($(this).is(':checked')) {
$("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
} else {
$("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
}
//$('.selector').prop("checked", this.name === "SelectAll");
check(event);
}
function check(event) {
var checked = $(".selector:checked").map(function() {
return this.name
}).get()
$('td').css('background', '#fff').filter(function() {
return $.inArray($(this).text(), checked) >= 0
}).css('background', $('#nextColor').val())
if ($(this).is(".selector"))
$('.all').not(this).prop("checked", false)
}
$("#Hidden").on("click", function() {
$(".selector").toggle();
});
});

If I get you right, you want to highlight the selected values with the current color and not change the color of the previously selected values.
In this case you should pass the current color to che check function each time you click the checkbox. With a few modifications your code would look like this:
$(document).ready(function() {
$('.selector').each(function() {
$(this).on('click', function(e) {
check($(this).prop("checked") ? $("#nextColor").val() : '#fff', $(this).attr("name"));
});
});
$('.all').each(function() {
$(this).on('click', all);
});
function all(event) {
if ($(this).is(':checked')) {
let checked = $("input:checkbox:not(:checked)", $(this).parents('form')).not(this);
checked.prop("checked", true);
check($("#nextColor").val(), ...checked.map((i, e) => e.name).get());
} else {
let checked = $("input:checkbox(:checked)", $(this).parents('form')).not(this);
checked.prop("checked", false);
check('#fff', ...checked.map((i, e) => e.name).get());
}
}
function check(color, ...elements) {
$('td').each((i, td) => {
if (elements.includes($(td).text())) $(td).css('background', color);
});
}
});
#charset "utf-8";
/* CSS Document */
*
{
margin: 3;
padding: 3;
}
html, body, .Container
{
height: 98%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.Header
{
margin-bottom: 10px;
background-color: #fff;
}
.Content
{
position: relative;
z-index: 1;
}
.Content:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 500px;
height: 100%;
}
.Wrapper > div
{
height: 100%;
}
.LeftContent
{
background-color: white;
overflow: auto;
width: 600px;
}
.mainContent
{
background-color: white;
margin-left: 800px;
}
.selector {
display: none;
}
tr.border_bottom td {
border-bottom:1pt solid black;
}
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border-collapse:collapse; /* Keeps the table lines like in excel */
table-layout:fixed; /* Fits the table in the screen */
}
.tableizer-table td {
padding: 6px;
margin: 6px;
border: 2px solid #ccc;
}
.tableizer-table th {
background-color: #FFFFFF;
color: #FFF;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3><input id="nextColor" type="color" value="#9ac99d"> Parameters:</h3>
<div>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />All</label><label>
<input type="checkbox" name="5" class="selector" />5</label><label>
<input type="checkbox" name="7" class="selector" />7</label><label>
<input type="checkbox" name="9" class="selector" />9</label><label>
<input type="checkbox" name="10" class="selector" />10</label><label>
<input type="checkbox" name="19" class="selector" />19</label><label>
<input type="checkbox" name="23" class="selector" />23</label><label>
<input type="checkbox" name="35" class="selector" />35</label><label>
<input type="checkbox" name="37" class="selector" />37</label><label>
<input type="checkbox" name="40" class="selector" />40</label><label>
<input type="checkbox" name="43" class="selector" />43</label><label>
<input type="checkbox" name="44" class="selector" />44</label><label>
<input type="checkbox" name="46" class="selector" />46</label><label>
<input type="checkbox" name="51" class="selector" />51</label><label>
<input type="checkbox" name="52" class="selector" />52</label><label>
<input type="checkbox" name="54" class="selector" />54</label><label>
<input type="checkbox" name="55" class="selector" />55</label><label>
<input type="checkbox" name="60" class="selector" />60</label><label>
<input type="checkbox" name="61" class="selector" />61</label><label>
<input type="checkbox" name="62" class="selector" />62</label><label>
<input type="checkbox" name="70" class="selector" />70</label><label>
<input type="checkbox" name="74" class="selector" />74</label><label>
<input type="checkbox" name="75" class="selector" />75</label> </form>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="SelectAll" class="all" />All</label><label>
<input type="checkbox" name="5" class="selector" />5</label><label>
<input type="checkbox" name="8" class="selector" />8</label><label>
<input type="checkbox" name="10" class="selector" />10</label><label>
<input type="checkbox" name="15" class="selector" />15</label><label>
<input type="checkbox" name="16" class="selector" />16</label><label>
<input type="checkbox" name="18" class="selector" />18</label><label>
<input type="checkbox" name="21" class="selector" />21</label><label>
<input type="checkbox" name="26" class="selector" />26</label><label>
<input type="checkbox" name="28" class="selector" />28</label><label>
<input type="checkbox" name="30" class="selector" />30</label><label>
<input type="checkbox" name="33" class="selector" />33</label><label>
<input type="checkbox" name="39" class="selector" />39</label><label>
<input type="checkbox" name="46" class="selector" />46</label><label>
<input type="checkbox" name="49" class="selector" />49</label><label>
<input type="checkbox" name="50" class="selector" />50</label><label>
<input type="checkbox" name="51" class="selector" />51</label><label>
<input type="checkbox" name="52" class="selector" />52</label><label>
<input type="checkbox" name="53" class="selector" />53</label><label>
<input type="checkbox" name="54" class="selector" />54</label><label>
<input type="checkbox" name="62" class="selector" />62</label><label>
<input type="checkbox" name="64" class="selector" />64</label><label>
<input type="checkbox" name="74" class="selector" />74</label> </form>
</div>
<div>
<table class="tableizer-table">
<thead><tr class="tableizer-firstrow"><th>2</th><th>3</th><th>18</th><th>20</th><th>22</th><th>29</th><th>30</th><th>32</th><th>33</th><th>34</th><th>38</th><th>39</th><th>51</th><th>56</th><th>57</th><th>60</th><th>61</th><th>63</th><th>72</th><th>75</th><th>77</th><th>80</th></tr></thead><tbody>
<tr><td>2</td><td>3</td><td>6</td><td>9</td><td>12</td><td>14</td><td>15</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>26</td><td>28</td><td>30</td><td>42</td><td>48</td><td>55</td><td>61</td><td>75</td><td>77</td></tr>
</tbody></table>
</div>

How to automatically uncheck a checkbox if the textbox is clicked

I'm building a donation form.
If a checkbox with a fixed amount is checked by the user, I would like it to automatically uncheck if next the user clicks the textbox to insert a custom amount.
It would be important that the textbox would also clear if after inserting a custom amount the user opted to check a checkbox with a fixed amount.
I know nothing of JavaScript. Will someone help me achieve this?
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="louzanimalespaypal#gmail.com">
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€05.00</span>
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€10.00</span>
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€15.00</span>
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€20.00</span>
<br>
<strong>Other Amount</strong><br>
$ <input type="text" class="TextBox" name="amount">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br /><br />
<input type="submit" value="Pay with PayPal!">
</form>
[UPDATE]
I've put together the flowing which does exactly what I need.
If anyone thinks this can be improved, I would appreciate it:
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
});
$(".textBox").focus(function() {
$(".checkbutton").prop("checked", false );
});
$(document).ready(function() {
$(".checkbutton").change(function() {
if ($(this).not(":checked")) {
$('.textBox').val("");
}
});
});
Fiddle

Looking at you're updated answer I would do the follow:
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
if ($("input.checkbutton-other").val()) {
$("input.checkbutton-other").val("");
}
});
$("input.checkbutton-other").on("focus click", function() {
$("input.checkbutton").prop("checked", false);
});
body {
font-family: sans-serif;
box-sizing: border-box;
}
.form-group {
margin-top: 15px;
}
label.cb-label {
margin: 5px;
float: left;
background: #ccc;
}
label.cb-label:hover {
background: grey;
color: #fff;
}
label.cb-label span {
text-align: center;
box-sizing: border-box;
padding: 10px 15px;
display: block;
}
label.cb-label input {
position: absolute;
visibility: hidden;
}
label.cb-label input:checked + span {
background-color: black;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="#" method="post" target="_blank">
<div class="form-group" style="display: inline-block;">
<label for="cb5" class="cb-label">
<input type="checkbox" name="amount" id="cb5" class="checkbutton" value="5.00">
<span>€05.00</span>
</label>
<label for="cb10" class="cb-label">
<input type="checkbox" name="amount" id="cb10" class="checkbutton" value="10.00">
<span>€10.00</span>
</label>
<label for="cb15" class="cb-label">
<input type="checkbox" name="amount" id="cb15" class="checkbutton" value="15.00">
<span>€15.00</span>
</label>
<label for="cb20" class="cb-label">
<input type="checkbox" name="amount" id="cb20" class="checkbutton" value="20.00">
<span>€20.00</span>
</label>
</div>
<div class="form-group">
<label for="cbOther"><strong>Any Amount</strong> $</label>
<input type="number" name="amount" id="cbOther" class="checkbutton-other">
</div>
<div class="form-group">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="test#email.com">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="WPS_PT">
<input type="hidden" name="return" value="#">
</div>
<div class="form-group">
<input type="submit" value="Pay with PayPal!">
</div>
</form>
I started by removing this JavaScript code
$(document).ready(function() {
$(".checkbutton").change(function() {
if ($(this).not(":checked")) {
$('.textBox').val("");
}
});
});
And replacing this code with:
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
if ($("input.checkbutton-other").val()) {
$("input.checkbutton-other").val("");
}
});
After changing the JavaScript I would update your HTML (codes like € are found on Character-Code.com):
<div class="form-group" style="display: inline-block;"></div> // this html around the check boxes so their float don't affect other elements of page
<label for="cb5" class="cb-label"> // add `for` to the labels which can be tied to a `id` of the input it is related too and added a `class` for the css to be attached too
After the HTML update their was some CSS updates required. I'd remove the padding from the body and added this class instead:
.form-group {
margin-top: 15px;
}
This class would be added to a div which would wrap your inputs. Also on your fancy checkbox css I added the class .cb-label so it won't effect other labels.

You can do something like this, pure javascript
<input type='checkbox' id='my-check' />
<input type='text' id='my-text' onfocus='uncheck()' />
<script>
function uncheck() {
document.getElementById('my-check').checked = false;
}
</script>

How to count number of checkboxes selected, change background after selected, and have hover continue to work

I want to create a list of checkboxes that users can select, however, limit the number of checkboxes to 5, as well as show the user how many they have currently clicked.
I also want to change the background color of the checkbox labels after they have been selected.
My main problem is that the number showing how many checkboxes have been selected is always one click behind. Also, the background color is changing after being selected, but the hover call stops working if selected.
Finally, I'd love to hear any suggestions on how to make my count function cleaner. I don't like having 7 if statements...
$(document).ready(function() {
$("input[name='group_option[]']").change(function() {
var maxAllowed = 5;
var cnt = $("input[name='group_option[]']:checked").length;
if (cnt > maxAllowed) {
$(this).prop("checked", "");
}
});
});
function count() {
var count = 0;
if ($('#checkbox1').is(':checked')) {
count = count + 1;
}
if ($('#checkbox2').is(':checked')) {
count = count + 1;
}
if ($('#checkbox3').is(':checked')) {
count = count + 1;
}
if ($('#checkbox4').is(':checked')) {
count = count + 1;
}
if ($('#checkbox5').is(':checked')) {
count = count + 1;
}
if ($('#checkbox6').is(':checked')) {
count = count + 1;
}
if ($('#checkbox7').is(':checked')) {
count = count + 1;
}
document.getElementById("count").innerHTML = count + "/5 Selected";
}
.options {
background-color: #e6e6e6;
display: block;
width: 300px;
margin-left: 20px;
padding: 2px;
margin-bottom: 1px;
}
.options:hover {
color: black;
cursor: pointer;
transition-duration: .15s;
background-color: #b3b3b3;
}
input {
float: left;
}
label:hover {
background-color: #bfbfbf;
}
input[type=checkbox]:checked + label {
background-color: #cccccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<b id="count" style="float: left;">0/5 Selected</b>
<br>
<br>
<input id="checkbox1" type="checkbox" name="group_option[]" value="option1" />
<label for="checkbox1" class="options" onclick="count(this)"> Option 1</label>
<input id="checkbox2" type="checkbox" name="group_option[]" value="option2" />
<label for="checkbox2" class="options" onclick="count(this)"> Option 2</label>
<input id="checkbox3" type="checkbox" name="group_option[]" value="option3" />
<label for="checkbox3" class="options" onclick="count(this)"> Option 3</label>
<input id="checkbox4" type="checkbox" name="group_option[]" value="option4" />
<label for="checkbox4" class="options" onclick="count(this)"> Option 4</label>
<input id="checkbox5" type="checkbox" name="group_option[]" value="option5" />
<label for="checkbox5" class="options" onclick="count(this)"> Option 5</label>
<input id="checkbox6" type="checkbox" name="group_option[]" value="option6" />
<label for="checkbox6" class="options" onclick="count(this)"> Option 6</label>
<input id="checkbox7" type="checkbox" name="group_option[]" value="option7" />
<label for="checkbox7" class="options" onclick="count(this)"> Option 7</label>

There's no need for your separate count() function as you can do all the required processing in your jQuery change event handler (and on* event attributes are considered outdated and should avoided anyway). You already have the cnt variable stored there which you can use. Try this:
$(document).ready(function() {
var maxAllowed = 5;
$("input[name='group_option[]']").change(function() {
var cnt = $("input[name='group_option[]']:checked").length;
if (cnt > maxAllowed)
$(this).prop("checked", false);
else
$('#count').text(cnt + '/5 Selected');
});
});
.options {
background-color: #e6e6e6;
display: block;
width: 300px;
margin-left: 20px;
padding: 2px;
margin-bottom: 1px;
}
.options:hover {
color: black;
cursor: pointer;
transition-duration: .15s;
background-color: #b3b3b3;
}
input {
float: left;
}
input:checked + label {
background-color: #cccccc;
}
input:checked + label:hover {
background-color: #bfbfbf;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<b id="count" style="float: left;">0/5 Selected</b><br><br>
<input id="checkbox1" type="checkbox" name="group_option[]" value="option1" />
<label for="checkbox1" class="options"> Option 1</label>
<input id="checkbox2" type="checkbox" name="group_option[]" value="option2" />
<label for="checkbox2" class="options"> Option 2</label>
<input id="checkbox3" type="checkbox" name="group_option[]" value="option3" />
<label for="checkbox3" class="options"> Option 3</label>
<input id="checkbox4" type="checkbox" name="group_option[]" value="option4" />
<label for="checkbox4" class="options"> Option 4</label>
<input id="checkbox5" type="checkbox" name="group_option[]" value="option5" />
<label for="checkbox5" class="options"> Option 5</label>
<input id="checkbox6" type="checkbox" name="group_option[]" value="option6" />
<label for="checkbox6" class="options"> Option 6</label>
<input id="checkbox7" type="checkbox" name="group_option[]" value="option7" />
<label for="checkbox7" class="options"> Option 7</label>

because of the CSS tag and for the anecdote, here is a CSS possibility :
// no need of javascript here, it is a CSS demo
form {
display: table;
}
label {
display: block;
margin-left: 20px;
position: relative;
padding: 0.25em 1em 0 0;
background: lightgray;
margin-bottom: 1px;
}
label[for^="checkbox"]:after {/* select the labels to use to draw a checkbox*/
content: '';
position: absolute;
right: 100%;
display: inline-block;
line-height: 9px;
height: 11px;
width: 11px;
margin: 2px 5px 0 0;
border: solid 1px #999;
box-shadow: inset 0 0 0 1px white, inset 0 0 1px 1px gray;
background: linear-gradient(to bottom right, gray, white 75%)
}
/* update checkbox colors on hover/checked */
#checkbox1:checked ~ label[for="checkbox1"]:after,
#checkbox2:checked ~ label[for="checkbox2"]:after,
#checkbox3:checked ~ label[for="checkbox3"]:after,
#checkbox4:checked ~ label[for="checkbox4"]:after,
#checkbox5:checked ~ label[for="checkbox5"]:after,
#checkbox6:checked ~ label[for="checkbox6"]:after,
#checkbox7:checked ~ label[for="checkbox7"]:after,
label:hover:after {
border: solid 1px #5586A3;
box-shadow: inset 0 0 0 1px white, inset 0 0 0 2px #9FD7F9;
background: linear-gradient(to bottom right, #7AB6DB, white 75%)
}
/* about time to hide imputs cloned in CSS */
[name^="group_option"] {
position: absolute;
right: 100%;
}
/* trigger the checkmark when checked */
#checkbox1:checked ~ label[for="checkbox1"]:after,
#checkbox2:checked ~ label[for="checkbox2"]:after,
#checkbox3:checked ~ label[for="checkbox3"]:after,
#checkbox4:checked ~ label[for="checkbox4"]:after,
#checkbox5:checked ~ label[for="checkbox5"]:after,
#checkbox6:checked ~ label[for="checkbox6"]:after,
#checkbox7:checked ~ label[for="checkbox7"]:after {
content: '\2714';
color: #223C82;
}
/* disallow option when 5 is reached */
[name^="group_option"]:checked ~[name^="group_option"]:checked ~[name^="group_option"]:checked ~[name^="group_option"]:checked ~[name^="group_option"]:checked ~ label {
pointer-events:none;
color:gray;
}
/* but allow to unchecked if you change yor mind */
label:hover,
#checkbox1:checked ~ label[for="checkbox1"],
#checkbox2:checked ~ label[for="checkbox2"],
#checkbox3:checked ~ label[for="checkbox3"],
#checkbox4:checked ~ label[for="checkbox4"],
#checkbox5:checked ~ label[for="checkbox5"],
#checkbox6:checked ~ label[for="checkbox6"],
#checkbox7:checked ~ label[for="checkbox7"] {
pointer-events:auto;
color:initial;
background: gray;
cursor:pointer;
}
/* add infos */
b {
display: block;
text-align: center
}
form {
counter-reset: checked;
}
input:checked {
counter-increment: checked;
}
b:before {
content: counter(checked);
}
b:after {
content: '5'
}
<form>
<!-- input linked to labels to be hidden -->
<input id="checkbox1" type="checkbox" name="group_option[]" value="option1" />
<input id="checkbox2" type="checkbox" name="group_option[]" value="option2" />
<input id="checkbox3" type="checkbox" name="group_option[]" value="option3" />
<input id="checkbox4" type="checkbox" name="group_option[]" value="option4" />
<input id="checkbox5" type="checkbox" name="group_option[]" value="option5" />
<input id="checkbox6" type="checkbox" name="group_option[]" value="option6" />
<input id="checkbox7" type="checkbox" name="group_option[]" value="option7" />
<!-- end hidden input linked to labels -->
<b>/</b>
<!-- label using pseudo to draw the checkbox -->
<label for="checkbox1" class="options"> Option 1</label>
<label for="checkbox2" class="options"> Option 2</label>
<label for="checkbox3" class="options" > Option 3</label>
<label for="checkbox4" class="options"> Option 4</label>
<label for="checkbox5" class="options"> Option 5</label>
<label for="checkbox6" class="options"> Option 6</label>
<label for="checkbox7" class="options"> Option 7</label>
<!-- end label using pseudo to draw the checkbox -->
<form>
demo to play with

The answer is at line 4 of your own code...
function count() {
var cnt = $("input[name='group_option[]']:checked").length;
document.getElementById("count").innerHTML = cnt + "/5 Selected";
}

To answer the second part of your question first: the reason your losing the :hover state on the labels is due to CSS specificity; you have the rule for a label following a :checked input after the rule for a hovered label, so the latter is being overridden. But the selector for the :checked rule has a higher specficity than the one for the :hover rule so simply changing the order of those two rules won't be enough, you'll also need to increase the specificity of the :hover rule.
The rest of your problems can be solved by addressing the last part of your question; simplifying your JavaScript. One way to do so would be to loop through all the inputs and listen for the change event on each, incrementing or decrementing the value of the count variable, depending on the checbox's status and the checking the value of count is not greater than 5.
I've added the ability to have some checkboxes initially checked and also taken the liberty of simplfying how you update the counter element and adding some CSS to make unchecked checkboxes & their labels appear disabled once 5 options have been selected in order to make it clearer that no more options can be selected.
var inputs=document.querySelectorAll("input.options"),
length=inputs.length,
counter=document.querySelector("#count>span"),
dataset=counter.parentNode.dataset,
count=0,input,max=5;
while(length--){
input=inputs[length];
count+=input.checked;
input.addEventListener("change",function(event){
count+=this.checked&&1||-1;
if(count>max){
this.checked=0;
count--;
}
dataset.count=counter.innerHTML=count;
},0);
}
dataset.count=counter.innerHTML=count;
*{box-sizing:border-box;font-family:sans-serif;}
#count{
font-weight:bold;
margin:0 0 20px;
}
input.options{
clear:left;
float:left;
}
label.options{
background:#e6e6e6;
cursor:pointer;
display:block;
margin:0 0 1px 20px;
padding:2px 2px 2px 20px;
transition:background .15s;
width:300px;
}
input.options:checked+label.options{
background:#ccc;
}
input.options+label.options:hover{
background:#bfbfbf;
}
#count[data-count="5"]~input.options:not(:checked),#count[data-count="5"]~input.options:not(:checked)+label.options{
opacity:.5;
pointer-events:none;
}
<p id="count"><span>0</span>/5 Selected</p>
<input class="options" id="checkbox1" name="group_option[]" type="checkbox" value="option1" />
<label class="options" for="checkbox1">Option 1</label>
<input class="options" id="checkbox2" name="group_option[]" type="checkbox" value="option2" />
<label class="options" for="checkbox2">Option 2</label>
<input class="options" id="checkbox3" name="group_option[]" type="checkbox" value="option3" />
<label class="options" for="checkbox3">Option 3</label>
<input checked class="options" id="checkbox4" name="group_option[]" type="checkbox" value="option4" />
<label class="options" for="checkbox4">Option 4</label>
<input class="options" id="checkbox5" name="group_option[]" type="checkbox" value="option5" />
<label class="options" for="checkbox5">Option 5</label>
<input class="options" id="checkbox6" name="group_option[]" type="checkbox" value="option6" />
<label class="options" for="checkbox6">Option 6</label>
<input class="options" id="checkbox7" name="group_option[]" type="checkbox" value="option7" />
<label class="options" for="checkbox7">Option 7</label>

how to really hide HTML div element using css or js

I want to hide div element located in bootstraps radio or checkbox container,
this is how it look using jquery:
I can't post image, so prev is here: http://prntscr.com/6wrk2m
<style>
.my-radio{
border: 1px solid #F0F;
}
</style>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x1" onClick="$('#qq').toggleClass('hide')" />1
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" onClick="$('#qq').toggleClass('hide')" />2
</label>
</div>
<div id="qq">8-bit pork belly Echo Park scenester</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x3" onClick="$('#qq').toggleClass('hide')" />3
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" onClick="$('#qq').toggleClass('hide')" />2
</label>
</div>
display:none doesn't work too ...

You have multiple ways. You can do this by
.hide {
display: none;
}
or even by this class:
.hide {
border: 0 none;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
UPDATE:
Check this example: JSFiddle

This would work, note the addition of classes and the use of an event handler instead of the inline javascript:
$(function() {
$('.hideOnClick').click(function(){
$('#qq').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.my-radio{
border: 1px solid #F0F;
}
</style>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x1" class="hideOnClick" />1
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" class="hideOnClick" />2
</label>
</div>
<div id="qq">8-bit pork belly Echo Park scenester</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x3" class="hideOnClick" />3
</label>
</div>
<div class="radio my-radio">
<label>
<input type="radio" name="x" value="1" id="x2" class="hideOnClick" />2
</label>
</div>

This is how i just did using jquery:
$('#qq').hide();
Hope it helps...

in CSS you can hide an element simply by changing it's css display property to none. simply use display:none and there you go :)
as for jquery solution you can use hide() method. here is a full example :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
update:
i personally prefer just overriding css using a java code.wrap this code in a function and add onclick to your button or your checkbox with the refrece of function you just made
document.getElementById("qq").setAttribute("style", "display:none");

How to disable all checkboxes on load, and enable them one by one as file is selected to upload?

just need to disable the checkboxes on page load and enable them as the user selects a file to upload. For example, image is selected by user to upload for desktop so the sizes for desktop get enabled. Probably with javascript.
<html>
<head>
<title>Wallpaper Uploading Script</title>
<style type="text/css">
.formatting{
font-family: Arial;
font-size: .8em;
}
label{
display: block;
float: left;
width: 150px;
padding: 0 0px;
margin: 0 0px 0;
text-align: right;
}
form input, form textarea{
margin: 2px 0 2px 2px;
}
.checkbox{
text-align: left;
display: block;
padding: 2px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="formatting">
<p>Select a file to Upload: </p>
<form action="../php/get_uploaded_wall.php" method="POST" enctype="multipart/form-data">
<fieldset>
<label for="wall_name">Wall Name:</label>
<input type="text" name="wall_name" size="50" /><br />
<label for="thumbnail_path">Thumbnail path:</label>
<input type="file" name="thumbnail_path" size="100" /><br />
<label for="desktop_path">Desktop path:</label>
<input id="desktop_path" type="file" name="desktop_path" size="100" /><br />
<label for="phone_path">Phone path:</label>
<input type="file" name="phone_path" size="100" /><br />
<label for="tablet_path">Tablet path:</label>
<input type="file" name="tablet_path" size="100" /><br />
<label for="desktop_dimension_id">Desktop dimensions:</label>
<label class="checkbox" id="desktop_checkbox">
<input type="checkbox" name="1366x768"> 1366x768<br />
<input type="checkbox" name="1280x800"> 1280x800<br />
<input type="checkbox" name="1920x1080"> 1920x1080<br />
<span></span>
</label>
<label for="phone_dimensions_id">Phone dimensions:</label>
<label class="checkbox" id="phone_checkbox">
<input type="checkbox" name="640x960"> 640x960<br />
<input type="checkbox" name="640x1136"> 640x1136<br />
<input type="checkbox" name="960x720"> 960x720<br />
</label>
<label for="tablet_dimensions_id" id="tablet_checkbox">Tablet dimensions:</label>
<label class="checkbox">
<input type="checkbox" name="1024x768"> 1024x768<br />
<input type="checkbox" name="2048x1536"> 2048x1536<br />
</label>
</fieldset>
<br />
<fieldset>
<input type="submit" value="Upload Wall" />
<input type="reset" value="Clear" />
</fieldset>
</form>
</body>
</html>

Here is my solution. You can view it here in Jfiddle.
The javascript I used relies on jQuery. You can see it below:
$(window).ready( function () {
$('.desktopCB').attr('disabled', '');
$('.phoneD').attr('disabled', '');
$('.tabletD').attr('disabled', '');
});
$('#desktop_path').on('change', function () {
$('.desktopCB').removeAttr('disabled');
});
$('input[name=phone_path]').on('change', function () {
$('.phoneD').removeAttr('disabled');
});
$('input[name=tablet_path]').on('change', function () {
$('.tabletD').removeAttr('disabled');
});