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

I'm making a grid of divs that can be toggled on and off. I need to post the values of these toggled divs to a database.

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

Currently I have jQuery waiting for clicks on the divs and then changing checkbox values on a hidden checkbox element...

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

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

As I end up posting this data with ajax, is there a better way to do this?

当我最终用ajax发布这些数据时,有更好的方法吗?

Here's what it looks like:
jQuery自定义复选框+隐藏的html复选框

这是它的样子:

2 个解决方案

#1

You actually don't need JS.
Use a <label> elements to wrap your checkbox and a span.
Change the style of that inner span using the input:checked next sibling selector +:

你实际上不需要JS。使用元素包装复选框和范围。使用输入更改内部范围的样式:选中下一个兄弟选择器+:

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>

on form submit you'll submit all the correct data without a single line of JS

在表单提交上,您将提交所有正确的数据,而无需单行JS

#2

I've found a similar question here: Jquery Use Image As CheckBox

我在这里找到了一个类似的问题:Jquery使用Image作为CheckBox

As an alternative to storing the value in a check box you could store it in a object? For example:

作为将值存储在复选框中的替代方法,您可以将其存储在对象中?例如:

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

Also check out this example for a similar use http://jsfiddle.net/bdTX2/

另请查看此示例以获得类似用途http://jsfiddle.net/bdTX2/

#1