如何为我的 DIV 元素列表提供复选框功能？

Question

我有一个显示列表的简单 HTML 页面。列表中的每个项目都是一个 div 元素（圆角框），其中包含一些数据和一个复选框。
现在我正在尝试为 div 提供复选框的功能，这意味着当用户单击 div 我希望它更改颜色（或显示 V 的图像）以及当用户提交页面时我想要所有项目已检查要发送的 ID。
这是 HTML 的片段：

<!-- item only list -->     
<div class="container">
  <ul class="plainList">
    <c:forEach items="${itemsFrom.itemsOnly}" var="item" varStatus="status">            
      <li>
        <div class="inner">
          <img src="resources/images/${item.id}.png">           
          <ul class="plainList">             
            <li><h4>${item.title} &trade;</h4></li>              
            <li><h5>${item.description}</h5></li>            
          </ul>            
          <input style="float: right;" type="checkbox" name="itemIds" value="${item.id}" />           
          <div style="clear: both"></div>           
        </div>           
      </li>         
    </c:forEach>      
  </ul>     
</div> 

谁能帮我开始：JQuery？ CSS?。有什么简单的例子吗？

Answer 1

你读过jQuery API 吗？
有多种方法可以实现您的目标，但对我来说，更有效的是使用 jQuery 和事件click。
在您的示例中，您必须在每个具有 inner 类的 div 上绑定事件 click。
语法是：

$(document).ready(function(){
    $(".inner").click(function(){
        //Do some stuff
    });
});

在第二部分，jQuery 包含了函数.css()，它允许你设置匹配元素的css-property。
例如，如果您想更改 div 的背景图像：

$(document).ready(function(){
    $(".inner").click(function(){
        $(this).css("background-image","url(path/to/your/image)");
    });
});

你会明白这个sn-p代码不会重现“复选框功能”，而只是改变你div的背景一次。
你应该看看 jQuery 事件.toggle()。

为了帮助你，这是做你想做的事的语法：

    $(document).ready(function(){

        $(".inner").toggle(
            function(){
                $(this).css("background-image","url(path/to/your/image1)");    
            },
            function(){
                $(this).css("background-image","url(path/to/your/image2)");
            }
        );

    });

Answer 2

这样的事情可能会对你有所帮助。我不知道您希望哪些 div 具有此功能，但我建议将它们分组。

$(".inner").click(function(){
   $(this).css("background-color", "red");
})