Stefan Larsen Stefan Larsen - 5 months ago 23
HTML Question

Checkboxes fill field with check info

I'm doing some javascript and I need some help.
I need help to do so its only the checked infomation you are going to lose in the box. So if I want "Thisted" and "Snested" and then im going to take off Thisted it is going to remove all. It should only remove "Thisted". Anyone who can help?
I tried §this but dosen't work.
You cant check it out here. http://thistedbolig.konggulerodhosting.dk/
It is the "Søg efter en bolig til dine behov"

$(".dropdown dt a").on('click', function() {
$(".dropdown dd ul").slideToggle('fast');
});

$(".dropdown dd ul li a").on('click', function() {
$(".dropdown dd ul").hide();
});
function getSelectedValue(id) {
return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
});

$('.mutliSelect1 input[type="checkbox"]').on('click', function() {

var title = $(this).closest('.mutliSelect1').find('input[type="checkbox"]').val(),
title = $(this).val() + ",";

if ($(this).is(':checked')) {
var html = '<span title="' + title + '">' + title + '</span>';
$('.multiSel').append(html);
$(".hida").hide();
} else {
$('span[title="' + title + '"]').remove();
var ret = $(".hida");
$('.dropdown1 dt a').append(ret);

$(".hida").show();

}
});





<dl class="dropdown">

<dt>
<a href="#0">
<span title="city" class="hida " ><img src="assets/images/search/placeholder.svg" alt="" style="width:20px; height:20px; margin-right:10px;">Vælg en by</span>
<p class="multiSel"></p>
</a>
</dt>

<dd>
<div class="mutliSelect1">
<ul>
<li>
<input id="Thisted" type="checkbox" value="Thisted" />
<label for="Thisted">Thisted</label>
</li>
<li>
<input id="Snested" type="checkbox" value="Snested" />
<label for="Snested">Snested</label>
</li>
<li>
<input id="Vesløs" type="checkbox" value="Vesløs" />
<label for="Vesløs">Vesløs</label>
</li>
<li>
<input id="Nors" type="checkbox" value="Vesløs" />
<label for="Nors">Nors</label>
</li>
<li>
<input id="Sennels" type="checkbox" value="Vesløs" />
<label for="Sennels">Sennels</label>
</li>
<li>
<input id="Østerild" type="checkbox" value="Vesløs" />
<label for="Østerild">Østerild</label>
</li>
</ul>
</div>
</dd>
</dl>

Answer

try adding code below inside your onclick function

if($('input[type=checkbox]:checked').length == 0){
   $(ret).show();
}

Here's new snippet also:

$(".dropdown dt a").on('click', function() {
              $(".dropdown dd ul").slideToggle('fast');
            });

            $(".dropdown dd ul li a").on('click', function() {
              $(".dropdown dd ul").hide();
            });
            function getSelectedValue(id) {
              return $("#" + id).find("dt a span.value").html();
            }

            $(document).bind('click', function(e) {
              var $clicked = $(e.target);
              if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide();
              
            });

            $('.mutliSelect1 input[type="checkbox"]').on('click', function() {
              
              var title = $(this).closest('.mutliSelect1').find('input[type="checkbox"]').val(),
                title = $(this).val() + ",";

              if ($(this).is(':checked')) {
                var html = '<span title="' + title + '">' + title + '</span>';
                $('.multiSel').append(html);
                $(".hida").hide();
              } else{
                $('span[title="' + title + '"]').remove();
    
                var ret = $(".hida");
                
              }
              if($('input[type=checkbox]:checked').length == 0){
                 $(ret).show();
                  }
            });

//$('div.multiSelect1 input[type=checkbox]').is(':checked').length == 0
// show
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="dropdown">

            <dt>
            <a href="#0">
              <span title="city" class="hida " ><img src="assets/images/search/placeholder.svg" alt="" style="width:20px; height:20px; margin-right:10px;">Vælg en by</span>
              <p class="multiSel"></p>
            </a>
            </dt>

            <dd>
                <div class="mutliSelect1">
                    <ul>
                        <li>
                            <input id="Thisted" type="checkbox" value="Thisted" />
                            <label for="Thisted">Thisted</label>
                          </li>
                        <li>
                            <input id="Snested" type="checkbox" value="Snested" />
                            <label for="Snested">Snested</label>
                          </li>
                        <li>
                            <input id="Vesløs" type="checkbox" value="Vesløs" />
                            <label for="Vesløs">Vesløs</label>
                        </li>
                        <li>
                            <input id="Nors" type="checkbox" value="Nors" />
                            <label for="Nors">Nors</label>
                        </li>
                        <li>
                            <input id="Sennels" type="checkbox" value="Sennels" />
                            <label for="Sennels">Sennels</label>
                        </li>
                        <li>
                            <input id="Østerild" type="checkbox" value="Osterild" />
                            <label for="Østerild">Østerild</label>
                        </li>
                    </ul>
                </div>
            </dd>
        </dl>