Question

我正在做一些JavaScript，我需要一些帮助。我需要帮助这样做，它只会在框中丢失已检查的信息。因此，如果我想要“Thisted”和“Snested”然后即将脱掉Thisted它将会删除所有。它应该只删除“Thisted”。有谁可以提供帮助？我试过§这个但是没有用。你不能在这里查看。 http://thistedbolig.konggulerodhosting.dk/ 这是“Søgefteren 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 1

尝试在onclick function

中添加以下代码

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

这里还有新的代码片段：

$(".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>

复选框用检查信息填写字段

1 个答案: