ホームページ > 記事 > ウェブフロントエンド > JavaScriptですべてを選択する方法
JavaScriptですべてを選択する方法
- 藏色散人オリジナル
- 2022-01-18 11:26:176522ブラウズ
全選択を実装する Javascript メソッド: 1. HTML と CSS を使用してフォームを作成します; 2. DOM メソッドを使用して、全選択と単一選択の「入力」要素をそれぞれ取得します; 3. variable isAllChecked; 4. isAllChecked の値を「すべて選択」ボタンに割り当てます。
この記事の動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
javascript すべてを選択するにはどうすればよいですか?
JS を使用して、次の形式で完全選択と逆選択を実装します。
これは、一般的な電子商取引ですべてを選択する演習でもあります。 (逆選択機能を備えたショッピング カートは少ないようですが、Windows エクスプローラーには逆選択機能があります)
では、逆選択機能を追加してみましょう。すべて選択から開始します:
DOM メソッドを使用して、完全選択と単一選択の「入力」要素をそれぞれ取得します。すべての選択に 1 つを使用します。直接使用します。getElementById() だけで十分です (ID は事前に設定されています)。ラジオの選択は 4 つあります。取得するには getElementByClassName() を使用します (クラスは事前に設定されています)。もちろん、得られるのは配列です。 取得した要素を変数に代入し、for ループを使用して配列を走査し、すべてを選択する変数のchecked属性を、単一選択された各変数のchecked属性に割り当てます。 この時点で、2と3は同時に解決されており、コードは次のとおりです:
製品の 4 行すべてがチェックされている場合は、「すべて選択」が自動的にチェックされ、いずれかの製品がチェックされていない場合は、「すべて選択」が自動的にチェックされます。キャンセル。
- #商品の 4 行すべてにチェックが入っていない場合は、「すべて選択」にチェックを入れて、商品の 4 行すべてにチェックを入れます。 「すべて選択」にチェックを入れ、「すべて選択」のチェックを外すと、すべての商品のチェックが外れます。
- 最初に要件 2 と 3 について話しましょう。ロジックは比較的単純です:
要件を整理したら、まず HTML と CSS を使用してこのフォームを描画します。コードは次のとおりです。マウスクリックイベントの関数 名前を付けたら、全選択の場合は「funcAll()」、単一選択の場合は「funcOne()」、逆選択の場合は「funcBackward()」とします。 CSS 部分は主にフォームに境界線を追加し、同時に接合部の境界線をブレンドする、基本的に最も単純な外観です。
<html>
<head>
<meta charset="utf-8">
<title>全选2</title>
<style type="text/css">
.wrap{
margin-left: 500px;
margin-top: 200px;
}
table{
border-collapse:collapse;
}
th{
border:1px solid black;
height: 45px;
}
td{
border:1px solid black;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="wrap">
<table cellspacing="0" cellpadding="14">
<thead>
<tr>
<th>
<input type="checkbox" id="selectAll" onclick="funcAll()">
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>iPhone X</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>iPad pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>iPad air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" class="selectOne" onclick="funcOne()">
</td>
<td>Apple watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" id="backwardOption" value="反选" onclick="funcBackward()">
</div>
</body>
</html> 次に、項目1について説明します。チェックが入っている場合は、「すべて選択」が自動的にチェックされ、チェックが入っていない製品がある場合、「すべて選択」は自動的にキャンセルされます。」 ここで、「すべて選択」の状態は、他のすべてのボタンを監視するのと同様です。変更がある場合は自動的に変更されます。したがって、このロジックを製品の各行のラジオ ボタンのマウス クリック イベントに書き込む必要があります。 変数 isAllChecked をブリッジとして設定しました。初期状態では isAllChecked が true として定義されており、各ラジオ ボタンをループします。ラジオ ボタンがチェックされていないことが検出されたら、isAllChecked を false に設定します。ループの値を選択し、isAllChecked の値を [すべて選択] ボタンに割り当てます。 このように、ラジオボタンが一つも選択されていない限り、全ての選択が非選択状態となります。 、コードは次のとおりです。
function funcAll(){
var selectAll = document.getElementById('selectAll');
var selectOnes = document.getElementsByClassName('selectOne');
for (var i = 0; i 反転選択について話しましょう<p></p><p></p>反転選択ボタンをクリックすると、すべてのラジオ ボタンのステータスが反転します。選択したものは選択解除され、選択されていないものは選択を <p></p> に変更し、[選択を反転] をクリックします。結果として、選択は以前のロジックと一致します。 <h3></h3><blockquote>
<ol>項目 1 は、実際には非常に簡単に実装できます。反転ボタンをクリックして、4 つのラジオ ボタンを順番に切り替えて、各要素に対応するチェックされた属性を反転します。 <li>ただし、以前に実装したすべての単一項目の全選択リスナーは、実際には各ラジオ ボタンのクリック イベントに実装されます。つまり、ラジオ ボタンをクリックして単一項目を変更しない場合、 , 選択ボタン「すべて選択」の状態は、実際にはグローバルには監視されません。 <li>したがって、反転選択マウス クリック関数に監視コードを書き込むことができます。最終的なコードは次のとおりです: </ol>
<pre class="brush:php;toolbar:false">function funcOne(){
var selectAll = document.getElementById('selectAll'); //函数作用域，所以得再定义一遍
var selectOnes = document.getElementsByClassName('selectOne');
var isAllChecked = true; //定义一个变量作为桥梁来控制全选按钮
for (var i = 0; i
最終的な効果は次のとおりです: 推奨学習: 「
js 基礎チュートリアル」
以上がJavaScriptですべてを選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。