jquery - 带有标签突出显示的自定义复选框

Question

我需要创建这样的复选框:

我需要在复选框中使用此复选标记:/image/UfplA.png

我尝试过的在这里:

<style>
        .myCheckbox input {
            display: none;
        }

        .myCheckbox span {
            width: 20px;
            height: 20px;
            display: block;
            background: gray;
        }

        .myCheckbox input:checked + span {
            background: url("/image/UfplA.png");
        }
    </style>

 <input id="Text1" type="text" style="width:150px" tabindex="0" />
    <input id="Text1" type="text" style="width:150px" tabindex="1" />
    <input id="Text1" type="text" style="width:150px" tabindex="2" />
    <label class="myCheckbox">
        <input type="checkbox" name="test" tabindex="3" />
        <span></span>
    </label>
    <input id="Button1" type="button" value="button" style="width:150px" tabindex="4" />

但是当我们按下选项卡时它不会突出显示，并且当我检查背景灰色是否丢失时，

感谢您提前提供帮助。

这是我的代码:http://jsfiddle.net/KM6w7/

Answer 1

要设置自定义复选框(实际上是一个标签)的样式，您必须使标签可聚焦。除了将 contenteditable 属性设置为 true 并将 font-size 设置为 0 之外，我想不出任何其他方法code> 隐藏插入符号。但是，我们需要脚本来阻止用户键入字符(尤其是 backspace 键)。当用户按下 Enter 或 Space 时，该脚本还需要切换(只需触发 click)复选框(这是正常行为)处于焦点状态时的复选框)。以下是代码详细信息:

$('.myCheckbox').keydown(function(e){      
   //check if the pressed key is Enter or Spacebar
   //then trigger the click() on the inner span to toggle the checkbox
   if(e.keyCode == 13 || e.keyCode == 32){
     $('span', this).click();        
   }
   //check if the pressed key is not TAB, then cancel the keydown
   //We won't cancel the TAB because it helps switch 
   //the focus to the next element.
   if(e.keyCode != 9) return false;
});

Demo.

注意:现在您的label可以成为焦点，因此您可以使用:focus来设置内部跨度的样式，如下所示:

.myCheckbox:focus > span {
   ...
}

我还添加了焦点状态的自定义样式，但我注释掉了所有样式，因为您可以使用默认的轮廓样式。

更新:因为我们总是必须使用脚本，所以我认为你可以用按钮替换标签(它通过以下方式支持可聚焦性)默认)，因此脚本会更短/更简洁。代码详情:

HTML:

<button class="myCheckbox" tabindex='4'>
  <input type="checkbox" name="test"/>
  <span></span>
</button>    

CSS:

.myCheckbox {
  width:20px;
  height:20px;
  padding:0;
}
.myCheckbox:focus {
  border:1px solid orange;
}

JS:

$('.myCheckbox').click(function(){
  $('input',this).click();
});    

Demo 2.