9

チェックボックスフィールドの実際のボックスを削除して、テキストをクリック可能にしようとしています。JSとcssでこれを行うにはどうすればよいですか？ボタンを使い始めましたが、ボタンよりもボックスの「状態」がわかりやすいので、チェックボックスに切り替えました。しかし、フォーマットとレイアウトを改善するためにcssでページを磨き上げているので、ボックスが邪魔になっています。ボックスがなくてもテキストをクリックできるようにしたいと思います。

4

3 に答える 3

25

CSSを使用して非表示にすることができますdisplay: none;

HTML

<input type="checkbox" name="a" id="a" value="a" /><label for="a">asdf</label>​

CSS

/* for all inputs of type checkbox */
input[type="checkbox"]  {
   display: none;
}

/* for just the single element by id */ 
#a {
    display: none; 
    /* visibility: hidden      works too */
}​

との違いvisibility:hiddendisplay:noneについては、こちらをご覧ください。

デモ

于 2012-06-17T03:28:39.957 に答える
0

JS効果の目的でテキストをボタンのように扱いたい場合は、テキストをスパンでラップし、起動しようとしている関数をそのスパンのonclickハンドラーに割り当てることができます。たとえば、jQueryを使用している場合は、次のようになります。

<script type="text/javascript">
// Your function:
function doSomething() {
    alert('Hello!');
}

// jQuery's on-document-ready function, to assign the
// function doSomething to the click handler of the span.
$(document).ready(function() {
    $("span#myButtonText").click(function() {
        doSomething();
    });
});
</script>

<p><span id="myButtonText">Click Me for an Alert!</span></p>
于 2012-06-17T03:36:31.890 に答える
0

使用するappearance: none;

注：すべてのブラウザと互換性または一貫性があるわけではありません。MDNドキュメントを参照してください

于 2022-02-10T10:07:22.577 に答える