We help IT Professionals succeed at work.

Put check in your check box

Jazzy 1012
Jazzy 1012 asked
on
143 Views
Last Modified: 2017-04-01
<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>

Open in new window


This is my output in the image
see.pngThe 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;
}

Open in new window

How can I make the selected check box look like this:
see1.png(the white check inside)
Does anyone know how?
Comment
Watch Question

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Can you post a larger image of what you want it to look like.

Author

Commented:
This is the best one I got:
see1.pngBut I just want to have a white checkbox inside the orange circle
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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.

Author

Commented:
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

Author

Commented:
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>

Open in new window

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Sidebar: your checkboxes don't have name attributes - they will not be sent to the server.