Avatar of Jazzy 1012
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>

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?
CSS

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Julian Hansen

Can you post a larger image of what you want it to look like.
Jazzy 1012

ASKER
This is the best one I got:
see1.pngBut I just want to have a white checkbox inside the orange circle
Julian Hansen

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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Jazzy 1012

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
Jazzy 1012

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>

Open in new window

ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Julian Hansen

Sidebar: your checkboxes don't have name attributes - they will not be sent to the server.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.