如何为复选框添加标题？

Question

如何为以下格式的复选框添加标题，类似于下图。

小提琴：

http://jsfiddle.net/manjunath_r/kdur163h/2/

代码：

 <ul data-role="listview" data-filter="true"  style="margin-right : 5px;margin-left : 5px" id="progress_list" data-filter-placeholder="Filter Names" >
<li data-icon="false"  class="listitem"><a href="#" onClick='#'>Jashwin <input type="checkbox" name="submt_photo" id="submt_photo" class="custom" checked ><input type="checkbox" name="submt_Identity" id="submt_Identity" class="custom" ><input type="checkbox" name="submt_Address" id="submt_Address" class="custom" checked ></a></li>

    <li data-icon="false"  class="listitem"><a href="#" onClick='#'>ravi kiran <input type="checkbox" name="submt_photo" id="submt_photo1" class="custom" checked ><input type="checkbox" name="submt_Identity" id="submt_Identity1" class="custom" ><input type="checkbox" name="submt_Address" id="submt_Address1" class="custom"  ></a></li>
    </ul>

Answer 1

您需要使用label。

这样做：

<label for="submt_photo">Submit Photo</label><input type="checkbox" name="submt_photo" id="submt_photo" class="custom" checked >

Answer 2

您可以使用CSS3内容属性在每个复选框下添加文本。

将title属性添加到具有所需值的复选框。

EG：

<input type="checkbox" title="1" name="submt_photo" id="submt_photo" class="custom" checked >

和CSS

.ui-checkbox input:after, .ui-radio input:after{
  content : attr(title);
  padding-top:10px;
  display:block;
}

DEMO