Checkbox inline with dropdown option - html

Question

I am trying to position a checkbox on the right side of a dropdown
<li>
<a class="drop-option" data-toggle="tab" href="#bizq">Business</a>
<input type="checkbox" value="" style="display: inline; float: right">
</li>
What I'm trying to have is the checkbox be a separate entity from the actual option itself. So that when I click on the option it goes to a page, and when I toggle the checkbox it does something else.
Essentially the goal is to have multiple pages with iframes. Each time I go to a page it load the iframe. If the checkbox is checked then the iframe can be persistent instead of getting destroyed each time a page is switched.
Should look something like this:

Answer 1

when I click on the option it goes to a page, and when I toggle the checkbox it does something else.
This can be implemented by following steps:
Add event listener to the option element.
When option element is clicked, check whether user clicks the checkbox inside the option. If it is the checkbox clicked, do nothing. Otherwise, go to step 3.
Check the current option element's checkbox status. Do different things according to different checkbox status.
Here is a code snippet:
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>