複選框內聯下拉選項

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>