我想让用户能够选择多个元素（每个元素恰好是一个段落）。问题是，html 中的标准选择多个（据我所知）每个选择只有一行。这是一个问题，因为如果我让线路走得很长，布局就会变得非常混乱。另外，如果我只是截断该行，文本的主要要点就会丢失。有没有办法用javascript解决这个问题？是否有替代方案允许显示所有文本并将值返回到冒号分隔列表中？
有很多方法可以做到这一点。最简单的方法是在每个段落旁边放置一个复选框。用户可以选中他选择的段落旁边的框。
If you have a smoother interface in mind, you can extend that idea by hiding the checkboxes with CSS, then using JavaScript to make the checkboxes selected when the corresponding paragraph is clicked and highlight the paragraph (by applying a CSS class) to show it as selected. A framework like jQuery will streamline this process nicely.
Edit:现在我想起来了，只要你把每个段落放在一个<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
