8

チェックボックス要素に関連付けられたラベルを使用してカスタムデザインのチェックボックスを作成し、チェックボックスを非表示 (表示: なし) にしようとしています。

これは、ラベルをクリック可能にするためにチェックボックスを表示する必要がある IE を除くすべてのブラウザーで正常に機能します。

これが私のコードです...

HTML

<input type="checkbox" id="myCheck" />​

CSS

label.checkbox {
    border:1px solid #666;
    width:25px;
    height:23px;
    display:block; 
}​

jquery

$("input[type=checkbox]").each(function() {
    $(this).hide().before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>');
});

$("input[type=checkbox]").live('change', function() {
    if ($(this).prop('checked') == true) {
        $('label[for=' + $(this).attr("id") + ']').html("X")
    } else {
        $('label[for=' + $(this).attr("id") + ']').html("")
    }
});​

またはjsfiddle

4

2 に答える 2

9

これを行うためのより効果的な方法があるかどうかはわかりませんが、チェックボックス要素の位置をページの外に設定することでこれを行うことができます。

.hiddenEl {
   position:absolute;
   top: -3000px;
}


$("input[type=checkbox]").each(function() {
    $(this).addClass("hiddenEl").before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>');
});

デモ

アップデート

また、チェックボックスの不透明度をゼロに設定することもできます。これにより、「dispayl:none」なしで非表示になります。

$(this).css("opacity", 0)

また

$(this).fadeTo(0, 0)
于 2012-07-18T14:06:27.920 に答える
2

これを試して：

#myCheck{
  position:absolute;
  left:-9999px;
  }

チェックボックスを「表示」のままにします

于 2012-07-18T14:09:22.240 に答える