文章/答案/技术大牛

发布

社区首页 >问答首页 >获取UL、LI和Label内Bootstrap下拉列表中选中的复选框的id，然后根据选中与否设置其他复选框

问获取UL、LI和Label内Bootstrap下拉列表中选中的复选框的id，然后根据选中与否设置其他复选框
EN

Stack Overflow用户

提问于 2021-05-07 01:06:55

回答 1查看 35关注 0票数 0

在另一个stackoverflow答案中，我发现了如何在Bootstrap下拉列表中使用标签标签中的复选框的输入标签在UL标签中的li标签中使用复选框。其中一个复选框是选择所有参数。如果选中，则需要取消选中并禁用其他复选框。取消选中ALL复选框时，将启用其他复选框。我已经尝试了许多其他人的问题的答案，但似乎无法禁用和取消选中其他复选框。我的另一个选择是，当选中ALL复选框时，选中所有其他框，当它未选中时，取消选中所有其他框。任何帮助都是非常感谢的。下面是我尝试过的代码：

“”“

    Javascript
    $(document).ready(function(){  
      $(".checkbox-menu").on("change", "input[type='checkbox']", function() {
           $(this).closest("li").toggleClass("active", this.checked);
   
           var value = $(this).parent().find("label :checkbox").val();
          var val1 = $(this).find(":checkbox").val();
           var val2 = $(this).find("label").find('input[type=checkbox]').val();
          var val3 = $(this).find("label").find('input[type=checkbox]').prop('checked', checked);
   var val4 = $(this).find("label").find('input[type=checkbox]').id;
   var val5 = $(this).find('input[type=checkbox]').id;
   var val6 = $(this).id;
   console.log(value)
   console.log(val1)
   console.log(val2)
   //if (val4 = "allbox"){
   //if (val3){
   if (val6 = "allbox") {
        document.getElementById("windbox").disabled = true;
        document.getElementById("windbox").checked = false;
        document.getElementById("visbox").disabled = true;
        document.getElementById("cloudbox").disabled = true;
        document.getElementById("pwbox").disabled = true;
        document.getElementById("tempbox").disabled = true;
        document.getElementById("dewbox").disabled = true;
        document.getElementById("altbox").disabled = true;
        document.getElementById("slpbox").disabled = true;
        document.getElementById("precipbox").disabled = true;
  } else{
        document.getElementById("windbox").disabled = false;
        document.getElementById("visbox").disabled = false;
        document.getElementById("cloudbox").disabled = false;
        document.getElementById("pwbox").disabled = false;
        document.getElementById("tempbox").disabled = false;
        document.getElementById("dewbox").disabled = false;
        document.getElementById("altbox").disabled = false;
        document.getElementById("slpbox").disabled = false;
        document.getElementById("precipbox").disabled = false;
  }

});

$(document).on('click', '.allow-focus', function (e) {
  e.stopPropagation();
});

   function set_boxes(me) {
     //all_checked = document.getElementById('allbox').checked
     console.log("In set_boxes")
     all_id = me.id;
    all_checked = me.val;
    console.log(all_id)
    console.log(all_checked)
    //var val1 = e.find("label").find('input[type=checkbox]').prop('checked', checked);
    //if($("#allbox").is(':checked')) {
    //if($('#allbox').attr('checked')) {
    //var val3 = $(".checkbox-menu").find("label").find('input[type=checkbox]').prop('checked', checked);
    //if (document.getElementById('allbox').checked){
    //if (val3){
    if (all_checked) {
        document.getElementById("windbox").disabled = true;
        document.getElementById("windbox").checked = false;
        document.getElementById("visbox").disabled = true;
        document.getElementById("cloudbox").disabled = true;
        document.getElementById("pwbox").disabled = true;
        document.getElementById("tempbox").disabled = true;
        document.getElementById("dewbox").disabled = true;
        document.getElementById("altbox").disabled = true;
        document.getElementById("slpbox").disabled = true;
        document.getElementById("precipbox").disabled = true;
    } else{
        document.getElementById("windbox").disabled = true;
        document.getElementById("visbox").disabled = false;
        document.getElementById("cloudbox").disabled = false;
        document.getElementById("pwbox").disabled = false;
        document.getElementById("tempbox").disabled = false;
        document.getElementById("dewbox").disabled = false;
        document.getElementById("altbox").disabled = false;
        document.getElementById("slpbox").disabled = false;
        document.getElementById("precipbox").disabled = false;
    }
  };

});

HTML
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data- 
   toggle="dropdown" aria-haspopup="true" aria-expanded="true">Parameter Selection
    <span class="caret"></span>
  </button>
   <ul class="dropdown-menu checkbox-menu allow-focus" id="boxlist">
      <li>
        <label><input type="checkbox" name="windbox" id="windbox">Wind</label>
      </li>
      <li>
        <label><input type="checkbox" name="visbox" id="visbox">Visibility</label>
      </li>
      <li>
        <label><input type="checkbox" name="cloudbox" id="cloudbox">Clouds</label>
      </li>
      <li>
        <label><input type="checkbox" name="pwbox" id="pwbox">Present Weather</label>
      </li>
      <li>
        <label><input type="checkbox" name="tempbox" id="tempbox">Air Temperature</label>
      </li>
      <li>
        <label><input type="checkbox" name="dewbox" id="dewbox">Dew Point</label>
      </li>
      <li>
        <label><input type="checkbox" name="altbox" id="altbox">Altimeter</label>
      </li>
      <li>
        <label><input type="checkbox" name="slpbox" id="slpbox">Sea-Level Pressure</label>
       </li>
       <li>
         <label><input type="checkbox" name="precipbox" id="precipbox">Precip</label>
       </li>
       <li>
         <label><input type="checkbox" name="allbox" id="allbox" class="all-box" onclick="return 
           set_boxes(this)">ALL</label>
       </li>
      </ul>
     </div>

“”“

checkbox

drop-down-menu

html-lists

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-07 01:24:49

据我所知，你的代码应该是这样的：

$(document).ready(function() {

  const $checkboxMenu = $(".checkbox-menu");
  /* might have to do this inside the event listener depending on
   *how many .checkbox-menu you have, this will work for the purpose of this demo.
   */
  const $otherCheckboxes = $checkboxMenu.find(':checkbox').not('#allbox');

  $checkboxMenu.on("change", ":checkbox", function() {
    $(this).closest("li").toggleClass("active", this.checked);
    if (this.id === 'allbox') {
      $otherCheckboxes
        .prop('checked', this.checked)
        .prop('disabled', !this.checked);
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data- toggle="dropdown" aria-haspopup="true" aria-expanded="true">Parameter Selection
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu checkbox-menu allow-focus" id="boxlist">
    <li>
      <label><input type="checkbox" name="windbox" id="windbox">Wind</label>
    </li>
    <li>
      <label><input type="checkbox" name="visbox" id="visbox">Visibility</label>
    </li>
    <li>
      <label><input type="checkbox" name="cloudbox" id="cloudbox">Clouds</label>
    </li>
    <li>
      <label><input type="checkbox" name="pwbox" id="pwbox">Present Weather</label>
    </li>
    <li>
      <label><input type="checkbox" name="tempbox" id="tempbox">Air Temperature</label>
    </li>
    <li>
      <label><input type="checkbox" name="dewbox" id="dewbox">Dew Point</label>
    </li>
    <li>
      <label><input type="checkbox" name="altbox" id="altbox">Altimeter</label>
    </li>
    <li>
      <label><input type="checkbox" name="slpbox" id="slpbox">Sea-Level Pressure</label>
    </li>
    <li>
      <label><input type="checkbox" name="precipbox" id="precipbox">Precip</label>
    </li>
    <li>
      <label><input type="checkbox" name="allbox" id="allbox" class="all-box">ALL</label>
    </li>
  </ul>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67422889

复制

相似问题

问获取UL、LI和Label内Bootstrap下拉列表中选中的复选框的id，然后根据选中与否设置其他复选框
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取UL、LI和Label内Bootstrap下拉列表中选中的复选框的id，然后根据选中与否设置其他复选框EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取UL、LI和Label内Bootstrap下拉列表中选中的复选框的id，然后根据选中与否设置其他复选框
EN