ボタンを使用してhtmlチェックボックスをチェックする

Question

私はこれをGoogleのどこかで解決するために苦労していますが、間違って検索していますが、StackOverflowの信頼できるメンバーに尋ねてきます。

私はHTMLチェックボックスをチェックするためにHTMLボタンを使用したいと思います。私が開発しているアプリケーションは端末上にあり、タッチスクリーンを介してHTMLチェックボックスが小さすぎるように使用されるため、チェックボックスを使用したくない理由はアクセシビリティ上の理由によるものです。

唯一の問題は、SQLクエリを使用して入力されるため、チェックボックスのリストが動的であることです。もちろん、私はHTMLボタンを作成するために同じことをすることができます。

私は、この機能を実行するには、JavaScriptが必要であると推測しています（これは私がこのアプリケーションで必要とする多くの機能を見つけているので、今、これを使用しています。

明確にするにはボタンをクリックしたいとします。「Fin Rot」という値があり、「Fin Rot」という値のチェックボックスをチェックします。別のボタンをクリックした場合、値が "Ich"であるとし、値が "Ich"のチェックボックスもチェックします。

Answer 1

ボタンとJavaScriptを使用すると、はるかに簡単なアプローチですか？ただ、例えば、ボタンのようなこのためだけ設計されています<label>、およびスタイルを使用します。

<input type="checkbox" id="finRot" name="something" value="Fin Rot"> 
<label for="finRot">Some text here, could be "Fin Rot"</label> 

かを（あなたがlabelにcheckbox上idとforを使用しない場合）：

を

<label> 
    <input type="checkbox" name="something" value="Fin Rot"> 
    Some text here, could be "Fin Rot" 
</label> 

....必要に応じてチェックボックスを非表示にすることもできますが、クリックするとチェックボックスを切り替えることができます。

You can test out a demo hereまた、必要に応じてラベルにボタン付きCSSが表示されます。

Answer 2

この例では、チェックボックスのオン/オフを切り替えるボタンを使用しています。 HTMLソリューションについて

http://jsfiddle.net/DnEL3/

<input type="checkbox" id="finRot" name="something" value="Fin Rot"> 
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button> 

Answer 3

方法。

<p><input type="checkbox" 
value="Another check box" 
name="cboxwithlabel" id="idbox"><label 
for="idbox">Another 
checkbox</label></p> 

< label>チェックボックスまたはラジオボタンのラベルを作成します。