Question

我需要帮助，如何只选择一个复选框？有谁可以帮助我？我一直在用javascript和jquery中的知识尝试所有的东西，但我不知道该怎么做？所以我希望这里有人可以帮我解决这个问题吗？

这是我的Html：

          <dl class="dropdown2">

            <dt>
            <a href="#0">
              <span title="price" class="hida2 "><img src="assets/images/search/money-1.svg" alt="" style="width:20px; height:20px; margin-right:10px;">Maks. husleje</span>
              <p class="multiSel"></p>
            </a>
            </dt>

            <dd>
                <div class="mutliSelect2">
                    <ul>
                        <li>
                          <input id="3500" type="checkbox" value="3500" />
                          <label for="3500">3500</label>
                        </li>
                        <li>
                            <input id="4500" type="checkbox" value="4500" />
                            <label for="4500">4500</label>
                        </li>
                        <li>
                            <input id="5500" type="checkbox" value="5500" />
                            <label for="5500">5500</label>
                        </li>
                        <li>
                            <input id="6000" type="checkbox" value="6000" />
                            <label for="6000">6000</label>
                        </li>
                        <li>
                            <input id="6500" type="checkbox" value="6500" />
                            <label for="6500">6500</label>
                        </li>
                        <li>
                            <input id="7000" type="checkbox" value="7000" />
                            <label for="7000">7000</label>
                        </li>
                        <li>
                            <input id="7500" type="checkbox" value="7500" />
                            <label for="7500">7500</label>
                        </li>
                    </ul>
                </div>
            </dd>
        </dl>

这是我的Jquery：

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

  $(".dropdown2 dd ul li a").on('click', function() {
  $(".dropdown2 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("dropdown2")) $(".dropdown2 dd   ul").hide();

  });

  $('.mutliSelect2 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);
  $(".hida2").hide();
  } else{
  $('span[title="' + title + '"]').remove();

  var ret = $(".hida2");

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

Answer 1

当我只需要选择一个时，我会使用它：

$('input[type="checkbox"]').on('change', function() {
    $('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

Answer 2

您可以使用单选按钮代替复选框：

选中单选按钮时，其他按钮取消选中。

看看这里： http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio

希望它有所帮助。

Answer 3

您可以使用单选按钮来实现此目的。

如果您仍想使用复选框，请像这样使用

$("input[type='checkbox']").click(function() {
  $("input[type='checkbox']").prop("checked", false);
  $(this).prop("checked", true);
});

Fiddle

带复选框的下拉列表仅选择一个

3 个答案: