html - 如何在不改变列表项大小的情况下将复选框添加到 HTML 列表项的开头

Question

我正在使用 jQuery 的 ajax 库来构建要显示的列表。

列表如下所示:

<ul id="results">
<li onclick="convener_selected('1')">mister 1</li>
<li onclick="convener_selected('2')">mister 2</li>
<li onclick="convener_selected('2')">mister 3</li>
</ul>

现在，当我点击列表的每一项时，即使是空白部分，点击事件也会正常触发。

但是，我使用这些方法在列表的开头添加了一个复选框:

一)

 <li><input type="checkbox" value="1"> <span  onclick="convener_selected('1')">mister 1</span> </li>    

二)

<input type="checkbox" value="1">
<li onclick="convener_selected('1')">mister 1</li>

c)

<li><input type="checkbox" value="1"> <div  onclick="convener_selected('1')">mister 1</div></li>    

a) 的问题是现在我必须点击先生 1 的字母才能触发点击事件。b) 和 c) 的问题在于它们出现在不同的行中，如果我添加:

style="display:in-line;"

然后在 c) 中它表现得像 span(即只有当我点击字母时它才起作用)并且在 b) 中它看起来很糟糕。

我可以做些什么来保留旧功能，同时在开始处添加一个复选框吗？

在此先感谢您提供的任何帮助。

Answer 1

您只需要更新您的 HTML:

更新的 HTML:

<ul id="results">
  <li><input type="checkbox"><span onClick="alert('1')">mister 1</span></li>
  <li><input type="checkbox"><span onClick="alert('2')">mister 2</span></li>
  <li><input type="checkbox"><span onClick="alert('3')">mister 3</span></li>
</ul>

updated fiddle