0

画面に表示される下にある2D配列を使用して、サイズXxYのボードのプレーンテキスト表現があります。各セルの値は1または0であり、ユーザーがボード上のそのディスプレイを選択できるプリセットアレイ構成があります。

ユーザーが独自のカスタムボード構成を選択できるようにしたい（つまり、チェックされていないセルが0であるのに対し、どのセルを1にするかを選択する）。これを行うには、チェックボックス入力の16x16テーブルを設定するだけです。この下部には送信ボタンがあり、構成を選択したらクリックしてボードを描画できます。

<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>
    ...
</table>

私の質問：必要に応じてチェックボックスを表示/非表示にするにはどうすればよいですか？カスタムレイアウトを作成することをユーザーが具体的にクリックした場合にのみ、チェックボックスの入力を表示したいと思います。ボックスを選択して送信を押したら、データを処理しますが、チェックボックスも非表示にします。これは可能ですか？ありがとう！

4

1 に答える 1

0

最も基本的なケースでは、次のようなものがあります。

CSS：

input[type=checkbox] {
  display: none; /* Make them initially hidden */
}

HTML：

<input type="button" value="Customize" onclick="showCheckboxes()"/>

Javascript：

function showCheckboxes(){
  var checkboxes = document.getElementsByTagName('input')
  for(var i=0; i<checkboxes.length; i++){
    if(checkboxes[i].type == 'checkbox'){
     checkboxes[i].style.display = 'inline');
    }
  }
}

他のイベントやインタラクションが発生したときにボックスを再び非表示にするために、同様のロジックを使用できることは明らかです。これは、ページ上のすべてのチェックボックスが表示されることを前提としています。ページに他の人がいる場合は、名前またはクラスで影響を与えたいものを特定し、ループ内でそれを確認する必要があります。

いつものように、これはすべて、jQueryのようなフレームワークを使用するとはるかに簡単になります。

フォームを送信する前にチェックボックスを非表示にすることは、実際には一般的なことではありません。しかし、あなたはそれを達成するためにこのようなものを持つことができます：

<form onsubmit="hideCheckboxes(); return true;">
于 2013-03-24T22:00:13.233 に答える