Jazzy 1012
asked on
Put check in your check box
<div class="row rowing">
<div class="col-6 col-md-3">
<p class="orange OldStandard"> Menu Filters</p>
<a type="button" class="check">Select All </a>
<br>
<a type="button" class="uncheck"> Unselect All</a>
<br>
<input type="checkbox" class="checkbox-round" id="vegan" checked/> <label for="vegan">Vegan</label>
<br/>
<input type="checkbox" class="checkbox-round" id="vegetarian" checked/> <label for="vegetarian">Vegetarian</label>
<br/>
<input type="checkbox" class="checkbox-round" id="pescetarian" checked/> <label for="pescetarian">Pescetarian</label>
<br/>
<input type="checkbox" class="checkbox-round" id="dairy-free" checked/> <label for="dairy-free">Dairy-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="egg-free" checked/> <label for="egg-free">Egg-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="fish-free" checked/> <label for="fish-free">Fish-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="shellfish" checked/> <label for="shellfish">Shellfish-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="tree" checked/> <label for="tree">Tree nut-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="peanut" checked/> <label for="peanut">Peanut-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="soy" checked/> <label for="soy">Soy-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="total-fat" checked/> <label for="total-fat">Low Total Fat</label>
<br/>
<input type="checkbox" class="checkbox-round" id="saturated-fat" checked/> <label for="saturated-fat">Low Saturated Fat</label>
<br/>
<input type="checkbox" class="checkbox-round" id="cholesterol" checked/> <label for="cholesterol">Low Cholesterol</label>
<br/>
<input type="checkbox" class="checkbox-round" id="sodium" checked/> <label for="sodium">Low Sodium</label>
<br/>
<input type="checkbox" class="checkbox-round" id="protein" checked/> <label for="protein">Protein >25g</label>
<br/>
<input type="checkbox" class="checkbox-round" id="calories" checked/> <label for="calories">Calories <450 calories</label>
<br>
</div>
This is my output in the image
The orange is selected, the gray isnt selected.
Here is my css:
.checkbox-round {
width: 13px;
height: 14px;
background-color: #ddd;
border-radius: 50%;
border: 1px solid white;
-webkit-appearance: none;
outline: none;
cursor: pointer;
margin-top: 7px !important;
}
.checkbox-round:checked {
background-color: #cf5630;
}
How can I make the selected check box look like this:(the white check inside)
Does anyone know how?
Can you post a larger image of what you want it to look like.
You are going to need to use an icon for that - you can't do it with CSS. So either a glyphicon or a font awesome icon that you hide / show depending on the state of the checkbox.
ASKER
Okay so if I want to put this font:
<i class="fa fa-check-circle-o" ></i>
How can I hide the checkbox, so I could put this on top of it. Because when I tried now, it only shows up next to it
<i class="fa fa-check-circle-o" ></i>
How can I hide the checkbox, so I could put this on top of it. Because when I tried now, it only shows up next to it
ASKER
I did this so far, but how can I show it when I click select All? Which is "check in the javascript"
<div class="row rowing">
<div class="col-6 col-md-3">
<p class="orange OldStandard"> Menu Filters</p>
<a type="button" class="check orange pointer OldStandard">Select All </a>
<br>
<a type="button" class="uncheck orange pointer OldStandard"> Unselect All</a>
<br>
<input type="checkbox" class="checkbox-round" id="vegan" checked/><label for="vegan"><i class="fa fa-check-circle-o hide12" id="chk-btn1"></i>Vegan</label>
<br/>
<input type="checkbox" class="checkbox-round" id="vegetarian" checked/> <label for="vegetarian"><i class="fa fa-check-circle-o hide12" id="chk-btn2"></i>Vegetarian</label>
<br/>
<input type="checkbox" class="checkbox-round" id="pescetarian" checked/> <label for="pescetarian"><i class="fa fa-check-circle-o hide12" id="chk-btn3"></i>Pescetarian</label>
<br/>
<input type="checkbox" class="checkbox-round" id="dairy-free" checked/> <label for="dairy-free"><i class="fa fa-check-circle-o hide12" id="chk-btn4"></i>Dairy-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="egg-free" checked/> <label for="egg-free"><i class="fa fa-check-circle-o hide12" id="chk-btn5"></i>Egg-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="fish-free" checked/> <label for="fish-free"><i class="fa fa-check-circle-o hide12" id="chk-btn6"></i>Fish-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="shellfish" checked/> <label for="shellfish"><i class="fa fa-check-circle-o hide12" id="chk-btn7"></i>Shellfish-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="tree" checked/> <label for="tree"><i class="fa fa-check-circle-o hide12" id="chk-btn8"></i>Tree nut-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="peanut" checked/> <label for="peanut"><i class="fa fa-check-circle-o hide12" id="chk-btn9"></i>Peanut-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="soy" checked/> <label for="soy"><i class="fa fa-check-circle-o hide12" id="chk-btn10"></i>Soy-free</label>
<br/>
<input type="checkbox" class="checkbox-round" id="total-fat" checked/> <label for="total-fat"><i class="fa fa-check-circle-o hide12" id="chk-btn11"></i>Low Total Fat</label>
<br/>
<input type="checkbox" class="checkbox-round" id="saturated-fat" checked/> <label for="saturated-fat"><i class="fa fa-check-circle-o hide12" id="chk-btn12"></i>Low Saturated Fat</label>
<br/>
<input type="checkbox" class="checkbox-round" id="cholesterol" checked/> <label for="cholesterol"><i class="fa fa-check-circle-o hide12" id="chk-btn13"></i>Low Cholesterol</label>
<br/>
<input type="checkbox" class="checkbox-round" id="sodium" checked/> <label for="sodium"><i class="fa fa-check-circle-o hide12" id="chk-btn14"></i>Low Sodium</label>
<br/>
<input type="checkbox" class="checkbox-round" id="protein" checked/> <label for="protein"><i class="fa fa-check-circle-o hide12" id="chk-btn15"></i>Protein >25g</label>
<br/>
<input type="checkbox" class="checkbox-round" id="calories" checked/> <label for="calories"><i class="fa fa-check-circle-o hide12" id="chk-btn16"></i>Calories <450 calories</label>
<br>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
$(document).ready(function() {
$('.check').click(function() {
$('input[type="checkbox"]').prop("checked", true);
});
$('.uncheck').click(function() {
$('input:checkbox').prop("checked", false);
});
});
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Sidebar: your checkboxes don't have name attributes - they will not be sent to the server.