Question

我正在将css转换为jquery css以更改checkbox的图形。这是因为每个复选框都需要具有唯一ID且没有jquery我将不得不手动为每个id编写多个类。为了避免这种情况，我想在jquery中编写它们。现在，我已经创建了，但我注意到所有的复选框都粘在一起。我尝试添加一些边距或<br/>来分隔它们但不能。我也注意到，当我点击时，背景颜色不会改变。但出于测试目的，我试图在点击时提醒真假，这是有效的。您能否检查一下css是否正确转换为jquery？

enter image description here

CSS

/* .level_1 */
.level_1 {
  width: 200px;
  height: 28px;
  position: relative;
  background: none;
}
.level_1 label {
  width: 30px;
  height: 30px;
  cursor: pointer;
  position: absolute;
  left: 4px;
  top: 4px;
  background-color:#D9D9D9;
  border:1px solid #00AAFF;
  border-radius: 50px;
}
.level_1 label:after {
  content: '';
  width: 28px;
  height: 28px;
  position: absolute;
  top: 0px;
  left: 0.1px;
  background: #00B0F0;
   opacity: 0;
  border-radius: 50px;
}
.level_1 label:hover::after {
  opacity: 0.3;
}
.level_1 input[type=checkbox] {
  visibility: hidden;
}
.level_1 input[type=checkbox]:checked + label:after {
  opacity: 1;
}

的jQuery

(function($)
{
    $(function()
    {

        //set style for checkbox
        var checkbox= $("input[type=checkbox][id^=level]");
        checkbox.css({
            "width":"200px",
            "height":"28px",
            "position":"relative",
            "background":"none"
            });

        var label= $("label[for='"+$(this).attr("id")+"']");
        var checkbox2= $("input[type=checkbox][id^=level] ~ label");
        checkbox2.css({
            "width": "30px",
            "height": "30px",
            "cursor": "pointer",
            "position": "absolute",
            "left": "4px",
            "top": "4px",
            "background-color":"#D9D9D9",
            "border":"1px solid #00AAFF",
            "border-radius": "50px",
            });


        var checkbox3= $("input[type=checkbox][id^=level] ~ label:after");
        checkbox3.css({
             "content": '',
             "width": "28px",
             "height": "28px",
             "position": "absolute",
             "top": "0px",
             "left": "0.1px",
             "background": "#00B0F0",
             "opacity": 0,
             "border-radius": "50px"
            });

        var checkbox4= $("input[type=checkbox][id^=level] ~ label:hover::after");
       checkbox4.css({
             "opacity": 0.3
            });

        var checkbox5= $("input[type=checkbox][id^=level]");
        checkbox5.css("visibility","hidden");

        //check if checkbox is checked
        var checkbox6= $("input[type=checkbox]").on("click",function()
        {
            var checked= this.checked;
            /*var checkbox7= $("checked ~ label:after");
            checkbox7.css("opacity", 1);*/
            alert(checked);

        });


    });
}(jQuery));

HTML

<table>
<tr>
<td>
<input type="checkbox" class="level" id="level_<?php echo $row['catid'];?>" value="<?php echo $row['catid'];?>">

 <label for="level_<?php echo $row['catid'];?>"><?php echo $row['catname'];?></label>
</td>
</tr>
</table>

Answer 1

我设法像这样解决了我的问题：

$("#container").delegate("input[type=checkbox]", "change", function () {
    $(this).toggleClass('green');
    $(this).nextAll().toggleClass("green");
});

$(".item").click(function(){
        $(this).next().toggleClass("clipped");
});

CSS #container＆gt; DIV { -webkit-用户选择：无; } ＃容器 { 背景：＃edece9; 宽度：300px; 身高：300px; }

#container div {
    height: 40px;
}
.green {
    color: green;
}

input[type=checkbox] {
display:none;
}

input[type=checkbox] + label
{
background: #999;
height: 40px;
width: 40px;
border-radius:20px;
display:inline-block;
padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
background: #0080FF;
height: 40px;
width: 40px;
border-radius:20px;
display:inline-block;
padding: 0 0 0 0px;
}

</style>

HTML “value =”“＆gt; “＆GT;

将css转换为jquery css以获取复选框

1 个答案: