en ligne avec l'option Checkbox menu déroulant

Question

Je tente de placer une case à cocher sur le côté droit d'un menu déroulant

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

Ce que je suis en train de faire est la case à cocher soit une entité distincte de l'option réelle elle-même. Alors que lorsque je clique sur l'option, il va à une page, et quand je coche la case, il fait quelque chose d'autre. Pour l'essentiel, le but est d'avoir plusieurs pages avec des iframes. Chaque fois que je vais à une page, il charge l'iframe. Si la case est cochée, l'iframe peut être persistant au lieu d'être détruit chaque fois qu'une page est commutée.

devrait ressembler à ceci:

Answer 1

lorsque je clique sur l'option, il va à une page, et quand je bascule la case, il fait autre chose.

Cela peut être mis en œuvre par les étapes suivantes:

1. Ajouter écouteur d'événement à l'élément d'option .
2. Lorsque l'élément de l'option est cliqué, vérifiez si l'utilisateur clique sur la case à cocher dans l'option . Si c'est la case à cocher, ne faites rien. Sinon, passez à l'étape 3.
3. Vérifiez l'état actuel de la case à cocher de l'élément option. Faites des choses différentes selon l'état différent de la case à cocher.

Voici un extrait de code:

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>