CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Mr world wide
Mr world wide

Reputation: 4814

How can show and hide check box text with Jquery

Jquery on time show and hide check box text if checked show the text if unchecked remove the text.

I am Trying to show the selected check boxes text at left side,and hide it when unchecked this is my from code what i have tried:

<div class="products-row">
    <?php $tq=$conn->query("select * from os_tiffen where tiffen_status=1 order by id_tiffen ASC");
        while ($tiffen = $tq->fetch_assoc()) {
        ?>  
        <div class="col-md-3"> 
            <div class="foodmenuform row text-center">
                <input type="checkbox" id="<?php echo $tiffen['tiffen_image'];?>" hidden>
                <label for="<?php echo $tiffen['tiffen_image'];?>"><img src="img/tiffen/<?php echo $tiffen['tiffen_image']; ?>" alt="" class="img img-responsive" /></label>
                <h3 id="tiffenname"><?php echo $tiffen['tiffen_name'];?></h3>
            </div>
        </div>
    <?php }  ?>
</div>

And this is My Script:

$( document ).ready(function() {
var FoodMenu = $('input[type=checkbox]:checked').map(function(){
return $(this).next('h3').text();
}).get().join("<br>");
$("#selectedfood").html(FoodMenu);
});

And this is the place where i am showing the output:

<div class="related-row" id="FoodSelected">
    <h4 class="text-center">Food Selected</h4> 
    <ul class="nav nav-pills nav-justified">
        <li class="active"><a id="selectedfood"></a></li>
    </ul>    
</div>

Upvotes: 0

Views: 86

Answers (2)

Samudrala Ramu
Samudrala Ramu

Reputation: 2106

$(document).ready(function(){

$("input:checkbox").click(function() {
        var output = "";
        $("input:checked").each(function() {
            output += $(this).next('span').text();
        }); 
        if (output != '')
         $(".dropdown").append('<li>'+output+'</li>');  
  }); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-content">

  <ul class="dropdown"></ul>
<ul>
  <li><input type="checkbox"/><span>one</span></li>  
  <li><input type="checkbox"/><span>two</span></li> 
  <li><input type="checkbox"/><span>three</span></li> 
  <li><input type="checkbox"/><span>four</span></li> 
  <li><input type="checkbox"/><span>five</span></li> 
  <li><input type="checkbox"/><span>six</span></li> 
  <li><input type="checkbox"/><span>seven</span></li> 
  <li><input type="checkbox"/><span>eight</span></li> 
  <li><input type="checkbox"/><span>nine</span></li> 
</ul>
</div>

Try It Once

Upvotes: 3

ConstantineUA
ConstantineUA

Reputation: 1051

Please have a look at your layout carefully, labels don't have names inside. The possible solution is to wrap a dish name inside a container:

    <div class="col-md-3"> 
        <div class="foodmenuform row">
            <input type="checkbox"  id="<?php echo $lunch['id_lunch'];?>" />
            <span class="foodmenuform-name"><?php echo $lunch['lunch_name'];?></span>
            <label for="<?php echo $lunch['id_lunch'];?>"><img src="img/lunch/<?php echo $lunch['lunch_image']; ?>"/></label>
        </div>
    </div>

and then use this container to get a dish name:

$( document ).ready(function() {
    //console.log( "ready!" );
    var FoodMenu = $('input[type=checkbox]:checked').map(function(){
        return $(this).next('.foodmenuform-name').text();
    }).get().join("</li><li>");
    $("#selectedfood").html("<ul><li>" + FoodMenu + "</li></ul>");
});

Upvotes: 1

Related Questions