复选框内联下拉选项

Question

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

<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可以是持久的，而不是每次切换页面时都被销毁。

应该是这样的：

Answer 1

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

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

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

以下是代码段：

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>