0

数年間プログラミングから離れていたので、比較的基本的な HTML フォームだと思っていたものを試してみましたが、どうすればよいか分からないことがいくつかありました。

まず、チェックボックスの 5x10 テーブルがあります。いずれかのボックスがチェックされるたびに、同じコードを実行したいと思います (4 つのチェックボックスが既にチェックされている場合はエラーをスローし、それ以外の場合は続行します)。

個々のボタンに「onclick」を追加することなく、このコードをすべてのチェックボックスで実行するにはどうすればよいですか?

次に、チェックボックスが選択されたときに、含まれている要素の背景色を変更したいと思います。

最後に、チェックボックスの画像を番号付きのボールまたはラベル付きのボタンに置​​き換える簡単な方法はありますか?

リクエストに応じて、これまでのところ、私のコードはここにあります: https://www.dropbox.com/s/mem6egamsojq18g/DrawTicket.html

4

2 に答える 2

2

さて、これは少しハックな、純粋な JS バージョンです。うまく始められるはずです...

HTML :

<table id="table">
    <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
     <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
     <tr>
        <td><input type="checkbox"/></td>
        <td><input type="checkbox"/></td>
    </tr>
</table>

CSS、視覚補助用：

td {
    border: 1px solid #cccccc;
}

td.checked {
    background: #ff0000;
}

JS :

var handler = function(event) {
    if(event.target.parentNode.className.indexOf('checked') < 0 ) {
        event.target.parentNode.className += ' checked';
    } else {
        event.target.parentNode.className = 
                event.target.parentNode.className.replace(' checked', '');
    }
};

var table = document.getElementById('table');
table.addEventListener('click', handler);

そして、遊ぶためのJSFiddle。

PS

それを画像に置き換えることについては - オンラインにはたくさんの解決策がありますが、それらのほとんどはクロスブラウザではありません - ここを参照してください: CSS を使用してチェックボックスをスタイルする方法?

于 2013-07-02T02:45:05.047 に答える
1

簡単な方法はjqueryを使用することだと思います：ヘッドセクションで（またはボディの最後の要素として）

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('input:checkbox').click(function(){
      if ($(this).is(':checked')) {
        $(this).parent().css('background-color', 'green');
      } else {
        $(this).parent().css('background-color', 'white');
      }
    });
  });
</script>

3番目の質問の良い解決策を考えています

于 2013-07-02T02:41:21.800 に答える