有很多方法可以做到这一点。最简单的方法是在每一段旁边加上一个复选框。用户可以选中所选段落旁边的复选框。
如果你有一个更平滑的界面,你可以通过用css隐藏复选框,然后用javascript来扩展这个想法。
单击相应段落时选中复选框,然后
突出显示段落(通过应用CSS类)以将其显示为选中。像jquery这样的框架可以很好地简化这个过程。
编辑:
现在我想起来了,只要你把每一段
<label>
元素,您甚至不需要javascript来选中/取消选中隐藏的复选框;只要标签的
for
属性设置正确。您所需要的javascript就是突出显示/取消突出显示标签。
下面是一个使用jquery的简单实现:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input.hidden-checkbox { display: none; }
label.multi-select { display: block; cursor: pointer; }
label.checked { background-color: #ddd; }
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input.hidden-checkbox').bind('change', function(e) {
var checkBox = $(e.target),
label = $('label[for=' + checkBox.attr('id') + ']');
if(label) {
if(checkBox.attr('checked')) {
label.addClass('checked');
} else {
label.removeClass('checked');
}
}
});
});
</script>
</head>
<body>
<form>
<input type="checkbox" value="1"
name="paragraph[]" id="paragraph-1"
class="hidden-checkbox"/>
<label for="paragraph-1" class="multi-select">Text of paragraph 1.
As long as you want. Lorem ipsum dolor sit amet...</label>
<input type="checkbox" value="2"
name="paragraph[]" id="paragraph-2"
class="hidden-checkbox" class="multi-select" />
<label for="paragraph-2" class="multi-select">Paragraph 2's text.
Lorem ipsum dolor sit amet...</label>
<!-- ...etc... -->
</form>
</body>
</html>
