javascript - 如何将所有选定的复选框附加到跨度中

Question

请帮忙。

我创建了两个下拉列表，显示带有图标的选定复选框。问题是这两个下拉菜单不是独立运行的。

如果我更改下拉列表 2 中的某些内容(该空间有什么安全性)下拉列表 1 中的所有内容也会被添加。

我需要下拉功能来处理多个下拉菜单。

注意:我需要将图标添加到选定的复选框中。 IE在显示所选复选框的下拉切换 div 中:)

此外，所选的复选框不会立即显示。我需要再次单击它才能显示所选的复选框

https://jsfiddle.net/gilbertlucas46/szyz4031/4/

function getValueUsingClass(){
    $(".checkbox-list li label").click(function() {
       /* declare an checkbox array */
    var features_checkedBox = []
    /* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
        $(" .checkbox-list li input:checked  + label").each(function() {
            allChecked = $(this).html();
            features_checkedBox.push(allChecked);
            $(this).parents('.dropdown').find('.dropdown-toggle').html('<span class="selections">' + features_checkedBox + '<i class="glyphicon glyphicon-menu-down"> </i> </span>');
        });
    })	
}

getValueUsingClass();
$('.dropdown-menu').on('click', function(e) {
      if($(this).hasClass('checkbox-list')) {
          e.stopPropagation();
      }
  });

.dropdown-select .dropdown-toggle {
    background: #71c621;
    background: linear-gradient(135deg, #71c621 0%, #5bab41 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#71c621', endColorstr='#5bab41',GradientType=1 );
    width: 100%;
    height: 42px;
    line-height: 42px;
    padding: 0;
    font-size: 14px !important;
    font-weight: normal;
    border: 2px solid #71c621;
    position: relative;
    overflow: hidden;
}
.dropdown-select .dropdown-menu {
    display: none;
}
 .dropdown-select {
    position: relative;
}
.dropdown-select.open .dropdown-menu {
    display: block !important;
    width: 100%;
    top: 50px;
}
label {
  cursor: pointer;
  display: block;
  border-bottom: 1px solid gray;
  width: 100%;
}
input {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="row">

  <div class="col col-md-6">
    <fieldset data-form-field="required-group" class="suitability">
      <legend>What is the space suitable for </legend>
      <div class="button-group dropdown dropdown-select checkDropdowns">
        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Suitable for? <i class="glyphicon glyphicon-menu-down">  </i></a>
      <ul class="checkbox-list dropdown-menu">
        <li>
          <input type="checkbox" id="transactable-storage-purpose-clothes" value="Clothes" data-required-group="storage_purpose" data-storage-purpose="">
          <label for="transactable-storage-purpose-clothes">
            <i class="glyphicon glyphicon-volume-off"></i> Clothes
          </label>
        </li>
        <li>
          <input type="checkbox" id="transactable-storage-purpose-caravan" value="Caravan" data-required-group="storage_purpose" data-storage-purpose="">
          <label for="transactable-storage-purpose-caravan">
            <i class="glyphicon glyphicon-flag"></i> Caravan
          </label>
        </li>
        <li>
          <input type="checkbox" id="transactable-storage-purpose-boat" value="Boat" data-required-group="storage_purpose" data-storage-purpose="">
          <label for="transactable-storage-purpose-boat">
            <i class="glyphicon glyphicon-headphones"></i> Boat
          </label>
        </li>
        <li>
          <input type="checkbox"  id="transactable-storage-purpose-car" value="Car" data-required-group="storage_purpose" data-storage-purpose="">
          <label for="transactable-storage-purpose-car">
            <i class="glyphicon glyphicon-backward"></i>Car
          </label>
        </li>
        <li>
          <input type="checkbox"  id="transactable-storage-purpose-furniture" value="Furniture" data-required-group="storage_purpose" data-storage-purpose="">
          <label for="transactable-storage-purpose-furniture">
            <i class="glyphicon glyphicon-resize-small"></i> Furniture
          </label>
        </li>
        <li>
          <input type="checkbox"  id="transactable-storage-purpose-docs" value="Office Docs" data-required-group="storage_purpose" data-storage-purpose="">
          <label for="transactable-storage-purpose-docs">
            <i class="glyphicon glyphicon-plane"></i> Office Docs
          </label>
        </li>
        <li>
          <input type="checkbox"  id="transactable-storage-purpose-trailer" value="Trailer" data-required-group="storage_purpose" data-storage-purpose="">
          <label for="transactable-storage-purpose-trailer">
            <i class="glyphicon glyphicon-magnet"></i> Trailer
          </label>
        </li>
        <li>
          <input type="checkbox"  id="transactable-storage-purpose-workshop" value="Workshop" data-required-group="storage_purpose" data-storage-purpose="">
          <label for="transactable-storage-purpose-workshop">
            <i class="icon icon-workshop"></i> Workshop
          </label>
        </li>
        <li>
          <input type="checkbox"  id="transactable-storage-purpose-container" value="Container" data-required-group="storage_purpose" data-storage-purpose="">
          <label for="transactable-storage-purpose-container">
            <i class="glyphicon glyphicon-leaf
glyphicon "></i> Container
          </label>
        </li>
      </ul>
      </div>
    </fieldset>
  </div>
  
</div>
<div class="row">
  <div class="col col-md-6">
    <fieldset class="security">
        <legend>What security does the space have <a href="#" data-toggle="popover" data-content="Let prospective renters know what security features your space has. You can select multiple options.">
           <i class="fa  fa-question-circle"></i></a></legend>
      <div class="button-group dropdown dropdown-select checkDropdowns detailsDrop">
        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">Select Security Features <i class="glyphicon glyphicon-menu-down">  </i></a>
        <ul class="checkbox-list dropdown-menu">
          
            
            <li data-value="<i class='icon icon-alarm'">
              <input type="checkbox"  id="transactable-security-alarm" value="4750" data-security="">
              <label for="transactable-security-alarm">
                <i class="icon icon-alarm"></i>   <span class="title">Alarm</span>
              </label>
            </li>
            
            <li data-value="<i class='icon icon-cctv'">
              <input type="checkbox" id="transactable-security-cctv" value="4751" data-security="">
              <label for="transactable-security-cctv">
                <i class="icon icon-cctv"></i>   <span class="title">CCTV</span>
              </label>
            </li>
            
            <li data-value="<i class='icon icon-deadlock'">
              <input type="checkbox"  id="transactable-security-deadlock" value="4752" data-security="">
              <label for="transactable-security-deadlock">
                <i class="icon icon-deadlock"></i>   <span class="title">Deadlock</span>
              </label>
            </li>
            
            <li data-value="<i class='icon icon-security-bars'">
              <input type="checkbox"  id="transactable-security-security-bars" value="5960" data-security="">
              <label for="transactable-security-security-bars">
                <i class="icon icon-security-bars"></i>   <span class="title">Security Bars</span>
              </label>
            </li>
            
            <li data-value="<i class='icon icon-lock'">
              <input type="checkbox" id="transactable-security-combination-lock" value="4753" data-security="">
              <label for="transactable-security-combination-lock">
                <i class="icon icon-lock"></i>   <span class="title">Combination Lock</span>
              </label>
            </li>
            
            <li data-value="<i class='icon icon-roller-door'">
              <input type="checkbox"  id="transactable-security-security-roller-door" value="4754" data-security="">
              <label for="transactable-security-security-roller-door">
                <i class="icon icon-roller-door"></i>   <span class="title">Security Roller-door</span>
              </label>
            </li>
            
        </ul><!-- checkbox-list dropdown-menu -->
      </div>
    </fieldset>
  </div>
</div>

Answer 1

您的代码的问题是 $(".checkbox-list li input:checked + label") 不依赖于调用处理程序的下拉列表。此外，由于标签的单击事件和输入的更改事件之间的差异，无法识别第一个值。

我稍微改变了你的代码:

$('.checkbox-list input').on('change', function() {
  var $this = $(this).parents('.checkbox-list');
  var features_checkedBox = [];

  $this.find('input:checked').each(function() {

    allChecked = $(this).next('label').html();
    features_checkedBox.push(allChecked);
    $(this).parents('.dropdown').find('.dropdown-toggle').html('<span class="selections">' + features_checkedBox + '<i class="glyphicon glyphicon-menu-down"> </i> </span>');

  });

});

<小时/>

<强> Example

您可能想要优化该示例以满足您的需求。