troubleshooting Question

Make check boxes work

Avatar of Jazzy 1012
Jazzy 1012 asked on
jQueryPHP
8 Comments2 Solutions174 ViewsLast Modified:
<?php 

require "../connection.php";



$query= "Select * from meals where is_active= '1' AND category ='entree' ";
$result=mysqli_query($conn,$query);

$query11= "Select * from meals where is_active= '1' AND category ='soup' ";
$result11=mysqli_query($conn,$query11);


$query21= "Select * from meals where is_active= '1' AND category ='bowl' ";
$result21=mysqli_query($conn,$query21);


$query31= "Select * from meals where is_active= '1' AND category ='salad' ";
$result31=mysqli_query($conn,$query31);		

$filters= "select * from meals LEFT JOIN meal_options ON meals.id = meal_options.meal_id LEFT JOIN main_filters ON meal_options.id = main_filters.meal_options_id where main_filters.vegan = 'N'";
$result_filter=mysqli_query($conn,$filters); ///THIS IS HOW I FILTER
	
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../assets/css/style.css?v=<?php echo rand();?>">
<link rel="stylesheet" href="../assets/css/fonts.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="pageContent">

	<div id="OrderContainer">
		<div>
	<div id="OrderGetStarted1" class="new1" style="height:0px">
		<div class="started">
			<span class="block">
				<h1 class="textCenter OldStandard fontt">Hi <?php echo $firstname?>, Now comes the fun part!</h1>
		</span>
		</div>
		</div>
	
<div class="row rowing">
<form method="post">
  <div class="col-6 col-md-3 checkbox-rounds" id="filter-checks">
  <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" value="vegan" id="vegan" checked/><label for="vegan" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Vegan</label>
        <br/>
        <input type="checkbox" class="checkbox-round" value="vegetarian" id="vegetarian" checked/> <label for="vegetarian" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Vegetarian</label>
        <br/>
        <input type="checkbox" class="checkbox-round" value="pescetarian" id="pescetarian" checked/> <label for="pescetarian" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Pescetarian</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="dairy-free" id="dairy-free" checked/> <label for="dairy-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Dairy-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="egg-free" id="egg-free" checked/> <label for="egg-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Egg-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="fish-free" id="fish-free" checked/> <label for="fish-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Fish-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="shellfish" id="shellfish" checked/> <label for="shellfish" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Shellfish-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="tree" id="tree" checked/> <label for="tree" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Tree nut-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="peanut" id="peanut" checked/> <label for="peanut" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Peanut-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="soy" id="soy" checked/> <label for="soy" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Soy-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="total-fat" id="total-fat" checked/> <label for="total-fat" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Low Total Fat</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="saturated-fat" id="saturated-fat" checked/> <label for="saturated-fat" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Saturated Fat</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="cholesterol" id="cholesterol" checked/> <label for="cholesterol" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Cholesterol</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="sodium" id="sodium" checked/> <label for="sodium" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Sodium</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="protein" id="protein" checked/> <label for="protein" class="OldStandard"> <span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Protein &#62;25g</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="calories" id="calories" checked/> <label for="calories" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Calories  &#60;450 calories</label>
  		<br>
  
  </div>
</form>

	<div class="col col-md-9" id="display_menu" style="margin-left:-80px;">
  	<p class="orange OldStandard pull-left title_menu">Soups </p>  
  	  	<button  class="disabled1 white cbtn1 pull-right" type="submit" id="submit" >Checkout  <i class="fa fa-long-arrow-right"></i></button>
  
		
		  	
		<div class= "flex rowWrap foodDiv">
			
<?php while($row11 = mysqli_fetch_assoc($result11)) {
	$name1=$row11['name'];
	$subtitle1=$row11['subtitle'];
	$image1=$row11['image_url'];
	$thumbnail1=$row11['thumb_url'];
	$meal_id1 = $row11['id'];
	
	$query12="select * from meal_options where meal_id = '$meal_id1'";
	$result12=mysqli_query($conn,$query12);

	
	$labels1=array();
	$prices1 =array();
	while($row12 = mysqli_fetch_assoc($result12))
	{
		$label1= $row12['label'];
		$labels1[]= $label1;
		
		$price1= $row12['price'];
		$price1 = number_format($price1/100, 2);
		$price1 = "$" . $price1;
		$prices1[]= $price1;
		
	}
	
	$labels1=implode(" | ",$labels1);
	//$prices1 = implode(" - ", $prices1);
	$firstEle = $prices1[0];
	$lastEle = $prices1[count($prices1) - 1];
	//echo $firstEle ."-". $lastEle;die;
	
?>
			
				<span class="deliveryItem satin pointer vertical-top textCenter">
				 <img src="<?php echo $image1; ?>" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name1;?> </h3>
				<p class= "OldStandardItalic text-black font2"> <?php echo $subtitle1;?> </p>
				<hr>
				<span class="open_sansbold text-black">
				<?php	if(count($prices1) > 1){print_r($firstEle ."-". $lastEle);}
				else{ print_r($price1);}
				?>
				<br>
				</span>
				<span class="text-black font2">
				<?php if(mysqli_num_rows($result12) >= 1){echo @$labels1;}  ?>
				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold">View/Add</button>
				</div>
				</span>
  
				
				<?php }?>
		</div>	
		
	
			<p class="orange OldStandard pull-left title_menu">Bowls</p>  
		
				<div class= "flex rowWrap foodDiv">
			
<?php while($row21 = mysqli_fetch_assoc($result21)) {
	$name21=$row21['name'];
	$subtitle21=$row21['subtitle'];
	$image21=$row21['image_url'];
	$thumbnail21=$row21['thumb_url'];
	$meal_id21 = $row21['id'];
	
	$query22="select * from meal_options where meal_id = '$meal_id21'";
	$result22=mysqli_query($conn,$query22);
	
	$labels22=array();
	$prices22 =array();
	while($row22 = mysqli_fetch_assoc($result22))
	{
		$label22= $row22['label'];
		$labels22[]= $label22;
		
		$price22= $row22['price'];
		$price22 = number_format($price22/100, 2);
		$price22 = "$" . $price22;
		$prices22[]= $price22;
		
	}
	$labels22=implode(" | ",$labels22);
	//$prices22 = implode(" - ", $prices22);
	$firstEle22 = $prices22[0];
	$lastEle22 = $prices22[count($prices22) - 1];
	
	
?>
			
				<span class="deliveryItem satin pointer vertical-top textCenter">
				 <img src="<?php echo $image21; ?>" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name21;?> </h3>
				<p class= "OldStandardItalic text-black font2"> <?php echo $subtitle21;?> </p>
				<hr>
				<span class="open_sansbold text-black">
				<?php if(count($prices22) > 1){print_r($firstEle22 ."-". $lastEle22);}
				else{ print_r($price22);}?>
				<br>
				</span>
				<span class="text-black font2">
				<?php if(mysqli_num_rows($result22) >= 1){echo @$labels22;}  ?>
				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold">View/Add</button>
				</div>
				</span>
  
				
				<?php }?>
		</div>
	
	
	
	
	
<p class="orange OldStandard pull-left title_menu">Salad</p>  
		
				<div class= "flex rowWrap foodDiv">
			
<?php while($row31 = mysqli_fetch_assoc($result31)) {
	$name31=$row31['name'];
	$subtitle31=$row31['subtitle'];
	$image31=$row31['image_url'];
	$thumbnail31=$row31['thumb_url'];
	$meal_id31 = $row31['id'];
	
	$query32="select * from meal_options where meal_id = '$meal_id31'";
	$result32=mysqli_query($conn,$query32);
	
	$labels32=array();
	$prices32 =array();
	while($row32 = mysqli_fetch_assoc($result32))
	{
		$label32= $row32['label'];
		$labels32[]= $label32;
		
		$price32= $row32['price'];
		$price32 = number_format($price32/100, 2);
		$price32 = "$" . $price32;
		$prices32[]= $price32;
		
	}
	$labels32=implode(" | ",$labels32);
	//$prices32 = implode(" - ", $prices32);
	$firstEle32 = $prices32[0];
	$lastEle32 = $prices32[count($prices32) - 1];
	
	
?>
			
				<span class="deliveryItem satin pointer vertical-top textCenter">
				 <img src="<?php echo $image31; ?>" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name31;?> </h3>
				<p class= "OldStandardItalic text-black font2"> <?php echo $subtitle31;?> </p>
				<hr>
				<span class="open_sansbold text-black">
				<?php if(count($prices32) > 1){print_r($firstEle32 ."-". $lastEle32);}
				else{ print_r($price32);}?>
				<br>
				</span>
				<span class="text-black font2">
				<?php if(mysqli_num_rows($result32) >= 1){echo @$labels32;}  ?>
				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold">View/Add</button>
				</div>
				</span>
  
				
				<?php }?>
		</div>
		
	
	
	
	
	
	
	
	
		
		<p class="orange OldStandard pull-left title_menu">Entr&#233;es</p>  
		
				<div class= "flex rowWrap foodDiv">
			
<?php while($row = mysqli_fetch_assoc($result)) {
	$name=$row['name'];
	$subtitle=$row['subtitle'];
	$image=$row['image_url'];
	$thumbnail=$row['thumb_url'];
	$meal_id = $row['id'];
	
	$query2="select * from meal_options where meal_id = '$meal_id'";
	$result2=mysqli_query($conn,$query2);
	
	$labels=array();
	$prices =array();
	while($row2 = mysqli_fetch_assoc($result2))
	{
		$label= $row2['label'];
		$labels[]= $label;
		
		$price= $row2['price'];
		$price = number_format($price/100, 2);
		$price = "$" . $price;
		$prices[]= $price;
		
	}
	$labels=implode(" | ",$labels);
	//$prices = implode(" - ", $prices);
	$firstEle1 = $prices[0];
	$lastEle1 = $prices[count($prices) - 1];
	
	
?>
			
				<span class="deliveryItem satin pointer vertical-top textCenter">
				 <img src="<?php echo $image; ?>" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name;?> </h3>
				<p class= "OldStandardItalic text-black font2"> <?php echo $subtitle;?> </p>
				<hr>
				<span class="open_sansbold text-black">
				<?php if(count($prices) > 1){print_r($firstEle1 ."-". $lastEle1);}
				else{ print_r($price);};?>
				<br>
				</span>
				<span class="text-black font2">
				<?php if(mysqli_num_rows($result2) >= 1){echo @$labels;}  ?>
				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold">View/Add</button>
				</div>
				</span>
  
				
				<?php }?>
		</div>	
		
  
	</div>
</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);
		  $(".chk-btn").hide();
		  
		});		
});
</script>
</body>
</html>

Css:
.foodDiv{
	
margin-top: 50px;
margin-left:-30px;
	
}
.foodImage{
	
position: absolute;
z-index: 2;
margin-left: -125px;
}
.title_menu{
	margin-top: 15px;
}

How can I make my checkbox filter every-time I click on a filter checkbox, At first it is all checked, then when I start clicking, it becomes unchecked so it removes the tables I dont want. I tried putting it in a form and having it post everytime, but Im unsure if this is the way to do it.
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 2 Answers and 8 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 8 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros