jQuery 自定义复选框 + 隐藏的 html 复选框答案

【问题标题】：jQuery custom checkboxes + hidden html checkboxjQuery 自定义复选框 + 隐藏的 html 复选框
【发布时间】：2015-05-03 09:55:56
【问题描述】：

我正在制作一个可以打开和关闭的 div 网格。我需要将这些切换 div 的值发布到数据库中。

目前我有 jQuery 等待点击 div，然后更改隐藏复选框元素上的复选框值...

$('.icon').click(function(){
    var checkValue = $(this).attr("data-c");
    // Then tick hidden checkbox where data-c = checkbox
});

当我最终使用 ajax 发布这些数据时，有没有更好的方法来做到这一点？

如下所示：

【问题讨论】：

标签： javascript php jquery ajax html

【解决方案1】：

你其实不需要 JS。
使用 <label> 元素来包装您的复选框和跨度。
使用input:checked 下一个兄弟选择器+ 更改内部span 的样式：

label.icon span{
  cursor:  pointer;
  display: inline-block;
  width:   75px;
  height:  75px;
  background:url(http://i.stack.imgur.com/ceycQ.jpg) no-repeat;
  border:  3px solid #0186C9;
  border-radius: 12px;
}
label.icon input{ /* hide the checkbox */
  position:   absolute;
  visibility: hidden;
}
label.icon input:checked + span{ /* when input is checked */
  background-position: 0 -75px;
}

<form action="">

  <label class="icon">
    <input type="checkbox" name="dog">
    <span></span>
  </label>

</form>

在form submit 上，您将提交所有正确的数据，而无需一行 JS

【讨论】：

太棒了。正是我所追求的。感谢您解释我不太好的解释！自从我对 JS 有了一定的能力后，我就真的过度使用它了。这是一个很好的提醒，要保守一点。

【解决方案2】：

我在这里发现了一个类似的问题：Jquery Use Image As CheckBox

作为将值存储在复选框中的替代方法，您可以将其存储在对象中吗？例如：

window.icons = {};
$('.icon').click(function() {
    var id = $(this).data('identifier');
    window.icons[id] = !!window.icons[id];
});

还可以查看此示例以了解类似用途 http://jsfiddle.net/bdTX2/

【讨论】：