复选框内联下拉选项

时间:2017-05-20 05:29:27

标签: html checkbox html-lists dropdown

我正在尝试在下拉列表的右侧放置一个复选框

<li>
   <a class="drop-option" data-toggle="tab" href="#bizq">Business</a>
   <input type="checkbox" value="" style="display: inline; float: right">
</li> 

我想要的是复选框是与实际选项本身分开的实体。因此,当我点击该选项时,它会进入一个页面,当我切换复选框时,它会执行其他操作。

基本上,我们的目标是让多个网页都有iframe。每次我去一个页面加载iframe。如果选中该复选框,则iframe可以是持久的,而不是每次切换页面时都被销毁。

应该是这样的:enter image description here

1 个答案:

答案 0 :(得分:0)

当我点击该选项时会转到某个页面,当我切换复选框时,它会执行其他操作。

这可以通过以下步骤实现:

  1. 将事件侦听器添加到选项元素。
  2. 单击选项元素时,请检查用户是否单击选项中的复选框。如果是单击复选框,则不执行任何操作。否则,请转到步骤3.
  3. 检查当前选项元素的复选框状态。根据不同的复选框状态做不同的事情。
  4. 以下是代码段:

    var $option = $('a.option');
    $option.on('click', function(e) {
      var $target = $(e.target);
      var $this = $(this);
      if ($target.hasClass('toggle')) {
        // checkbox clicked.
        return;
      }
      var childToggle = $this.find('input.toggle').prop('checked');
      var label = $this.find('.label').text();
      if (childToggle) {
        alert('Page ' + label + ' clicked, WITH checkbox checked.');
      } else {
        alert('Page ' + label + ' clicked, WITHOUT checkbox checked.');
      }
    
    });
    ul>li {
      list-style: none;
    }
    a.option {
      background: darkcyan;
      color: white;
      display: block;
      width: 100px;
      padding: 10px;
      text-decoration: none;
      border-bottom: 1px solid white;
    }
    a.option input.toggle {
      float: right;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul>
      <li>
        <a href="javascript:;" class="option">
          <span class="label">Business</span>
          <input type="checkbox" class="toggle" value="isSelected">
        </a>
      </li>
      <li>
        <a href="javascript:;" class="option">
          <span class="label">Tech</span>
          <input type="checkbox" class="toggle" value="isSelected">
        </a>
      </li>
    </ul>