jquery - 如何在 html 中使用 fly on checkbox 添加多个东西?

标签 jquery html css

我想使用复选框检查一些东西,并在弹出窗口关闭时获取它们,如下所示:

enter image description here

我该怎么做?

假设我有一个 div 并且 div 包含元素,当我点击元素时,我想显示复选框,当我关闭那个弹出窗口时我需要检索那些选定的东西

<div id="div1" style="display:block;background-color:green">>
            <ul>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
                <li>Item1</li>
            </ul>
        </div>

最佳答案

您可以通过处理 li 元素点击(切换带有选中图标背景的类)来实现此目的

var selectedItems = "";
$("ul").on("click", "li", function() {
    var $this = $(this);
    $this.toggleClass("selected");
    selectedItems = $this.parent().find("li.selected").map(function() {
        return this.innerText || this.textContent;
    }).get().join(',');    
});

创建这个 css 类(类似):

li {
  padding-left: 25px;
  cursor: pointer;
}

li.selected {
  background-image: url(http://www.pbsys.com.br/icon_checked.gif);
  background-repeat: no-repeat;
  background-position: 2px 3px;
}

要获取当前选中的元素,只需读取 selectedItems 变量

关于jquery - 如何在 html 中使用 fly on checkbox 添加多个东西?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15021497/

相关文章:

jquery 导航菜单 div 下拉菜单

php - 防止在拖动时显示图像

html - css float 在 IE 7 或 8 中不起作用

javascript - @media 查询被 javascript DOM 操作覆盖

jQuery提交,我如何知道按下了哪个提交按钮?

jquery - 使用 JQuery 进行 ajax 调用时隐藏 div,以获得流畅的体验

HTML 字符编码

jquery - 在 map 上做热点有什么好办法

带复选框的 CSS 布局

javascript - 如何防止覆盖/标题在网站上再次显示