复选框内联下拉选项

我想在一个下拉复选框内联下拉选项

<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都可以是持久性的，而不是被破坏。

应该是这个样子：

来源

2017-05-20 user2782104

当我点击选择它关系到一个页面，当我切换复选框它做别的事情。

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

事件侦听器添加到选项元素。
当选项元素被点击时，检查用户是否点击选项内的复选框。如果是单击的复选框，则不执行任何操作。否则，请转至步骤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>

来源

2017-05-20 07:10:51 shaochuancs

复选框内联下拉选项

回答

相关问题