您有几个列表组，如下所示：
<div class="list-group">
<a href="javascript:callFunction(1)" class="list-group-item" id="title1">Title 1</a>
<a href="javascript:callFunction(2)" class="list-group-item" id="title2">Title 2</a>
<a href="javascript:callFunction(3)" class="list-group-item" id="title3">Title 3</a>
</div>
该清单显示很好。每个项目都显示为一行，并且href应用于整个行而不是文本。
我正在尝试做的是类似的事情，但有两个前导复选框。这些复选框中的每一个都对链接中的调用进行不同的javascript调用。以下是我在列表组<ul>中形成的内容，因为我还能如何对这三个不同的项进行分组？
<li class="list-group-item">
<input type="checkbox" class="checkbox-inline my-checkbox-margin" id="HS" name="HS-1" value="HS-1" checked onchange="javascript:callOtherFunction(1);">
<input type="checkbox" class="checkbox-inline" id="MS" name="MS-1" value="MS-1" onchange="javascript:callStillAnotherFunction(1);">
<a href="javascript:callFunction(1)" id="title1">Other Title 1</a>
</li>
<li class="list-group-item">
<input type="checkbox" class="checkbox-inline my-checkbox-margin" id="HS" name="HS-2" value="HS-2" checked onchange="javascript:callOtherFunction(2);">
<input type="checkbox" class="checkbox-inline" id="MS" name="MS-2" value="MS-2" onchange="javascript:callStillAnotherFunction(2);">
<a href="javascript:callFunction(2)" id="title2">Other Title 2</a>
</li>
最后，我无法将鼠标悬停在“行”上并点击该链接。我必须将鼠标悬停在链接文本上。
由于缺少bootstrap，这些将无法正确显示，但它们应该足够简单......