「クリックイベント」は、 Javascript で操作するもので、 <input> タグではクリックイベントは操作できない。 おそらく、 ラジオボタンやチェックボックスによって、 要素の表示／非表示を切り替えたりする仕組みのことを 言っているんだと思うけど、 それはクリックイベントを操作しているんじゃなくて、 CSS の :checked 擬似クラスによるスタイルの切替えをしているだけ。 たとえば、 ──────────────── <input type="checkbox"> <div>あいうえお</div> ──────────────── のように構成した HTML に対して、 CSS で <div> 要素を display:none にして、 「チェックされたチェックボックスの後にある div 要素」を display:block でリセットすれば、 チェックボックスにチェックが入ったときだけ <div> が表示される。 ──────────────── [ type="checkbox" ] + div { display: none } [ type="checkbox" ]:checked + div { display: block } ──────────────── チェックボックスを表示したくない場合は、 チェックボックスを display:none にして、 代わりに <label> を置いて、 for 属性でチェックボックスの id 属性とリンクさせれば、 ラベルを切替えボタンとして <div> の表示／非表示を切替えれる。 ─[ HTML ]────────── <label for="myswitch">表示／非表示</label> … <input id="myswitch" type="checkbox"> <div>あいうえお</div> ─[ CSS ]─────────── [ type="checkbox" ] { display: none } [ type="checkbox" ] + div { display: none } [ type="checkbox" ]:checked + div { display: block } ──────────────── 複数の要素の表示／非表示をチェックボックスで切り替えたい場合も、 しくみは全く同じ。 チェックボックスと <label> をその個数分だけ用意すればいいだけ。 ─[ HTML ]────────── <label for="sw01">ボタン１</label> <label for="sw02">ボタン２</label> <label for="sw03">ボタン３</label> … <input id="sw01" type="checkbox"> <div>あいうえお</div> <input id="sw02" type="checkbox"> <div>かきくけこ</div> <input id="sw03" type="checkbox"> <div>さしすせそ</div> ─[ CSS ]─────────── label { display: block } [ type="checkbox" ] { display: none } [ type="checkbox" ] + div { display: none } [ type="checkbox" ]:checked + div { display: block } ────────────────