javascript - 如果选择标签上没有选定的数据，则显示消息

Question

我在select tag html中使用input type="checkbox"并使用此代码来显示所有选定的数据。但我遇到的问题是，当我取消选择所有选定的数据时，“SELECT”消息不会显示。

当我尝试使用 var ret = $(".hida").show(); 如果我取消选择 1 个数据，则会显示“SELECT”消息，我想要实现的是“仅当我取消选择之前选择的所有数据时，才会显示“SELECT”消息。

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

  var title = $(this).closest('.mutliSelect').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");

        $('.dropdown dt a').append(ret);

    console.log($(this).is(':checked'));
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<dl class="dropdown"> 

                        <dt>
                            <a href="#">
                              <span class="hida">Select</span>    
                              <p class="multiSel"></p>  
                            </a>
                        </dt>

                        <dd>
                            <div class="mutliSelect">
                                <ul>
                                    <li>
                                        <input type="checkbox" value="Palliative/Hospice care" /> Palliative/Hospice care
                                    <li>
                                       <input type="checkbox" value="Prescription therapy" /> Prescription therapy
                                    <li>
                                        <input type="checkbox" value="Physical therapy" /> Physical therapy
                                    <li>
                                        <input type="checkbox" value="Rehabilitation" /> Rehabilitation
                                    <li>
                                        <input type="checkbox" value="Complex wound dressings" /> Complex wound dressings
                                    <li>
                                        <input type="checkbox" value="Tube feeding" /> Tube feeding
                                    <li>
                                        <input type="checkbox" id="personal_grooming" name="personal_grooming"/> Personal grooming
                                    <li>
                                        <input type="checkbox" value="Meal preparations" /> Meal preparations
                                    <li>
                                         <input type="checkbox" value="Assistance in administering medication" /> Assistance in administering medication
                                    </li>
                                    <li>
                                         <input type="checkbox" value="Errands and transaportation" /> Errands and transaportation
                                    </li>
                                    <li>
                                        <input type="checkbox" value="Companionship" /> Companionship
                                    </li>
                                    <li>
                                        <input type="checkbox" value="Medical Reminders" /> Medical Reminders
                                    </li>
                                </ul>
                            </div>
                        </dd>
                    </dl>

Answer 1

您可以获取所有选中复选框的数量，如果等于0，则显示选择。希望这就是您正在寻找的东西？

$('.mutliSelect input[type="checkbox"]').on('click', function () {
	var 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");
		//$('.dropdown dt a').append(ret);
		if ($('.mutliSelect input[type="checkbox"]:checked').length === 0)
			$(".hida").show();
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="dropdown">
<dt>
	<a href="#">
		<span class="hida">Select</span>    
		<p class="multiSel"></p>  
	</a>
</dt>

<dd>
	<div class="mutliSelect">
		<ul>
			<li>
				<input type="checkbox" value="Palliative/Hospice care" /> Palliative/Hospice care
				<li>
					<input type="checkbox" value="Prescription therapy" /> Prescription therapy
					<li>
						<input type="checkbox" value="Physical therapy" /> Physical therapy
						<li>
							<input type="checkbox" value="Rehabilitation" /> Rehabilitation
							<li>
								<input type="checkbox" value="Complex wound dressings" /> Complex wound dressings
								<li>
									<input type="checkbox" value="Tube feeding" /> Tube feeding
									<li>
										<input type="checkbox" id="personal_grooming" name="personal_grooming" />                                                Personal grooming
										<li>
											<input type="checkbox" value="Meal preparations" /> Meal preparations
											<li>
												<input type="checkbox" value="Assistance in administering medication" />                                                        Assistance in administering medication
											</li>
											<li>
												<input type="checkbox" value="Errands and transaportation" /> Errands
												and transaportation
											</li>
											<li>
												<input type="checkbox" value="Companionship" /> Companionship
											</li>
											<li>
												<input type="checkbox" value="Medical Reminders" /> Medical Reminders
											</li>
		</ul>
	</div>
	</dd>
</dl>