ホームページ >ウェブフロントエンド >jsチュートリアル >チェックボックスの完全選択、選択なし、および逆選択を実装するための js メソッド_javascript スキル
この記事の例では、js でチェックボックスの完全選択、非選択、および逆選択を実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
1. アイデア:
1. 要素を取得します
2. すべて選択、選択解除、または選択を反転するためのクリック イベントを追加します
3. for ループチェックボックスを使用します
4. チェックボックスを true に設定して、すべてを選択します
5. チェックボックスのチェックを false に設定して選択を解除します
6. if 判定により、checked が true で選択状態に設定されている場合は、checked が false で選択されていない場合は、checked が true で選択済みに設定されます。
2. HTML コード:
<input type="button" value="全选" id="sele"/> <input type="button" value="不选" id="setinterval"/> <input type="button" value="反选" id="clear"/> <div id="checkboxs"> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> <input type="checkbox"/><br /> </div>
3. js コード:
<script> window.onload=function(){ var sele=document.getElementById('sele');//获取全选 var unsele=document.getElementById('setinterval');//获取不选 var clear=document.getElementById('clear');//获取反选 var checkbox=document.getElementById('checkboxs');//获取div var checked=checkbox.getElementsByTagName('input');//获取div下的input //全选 sele.onclick=function(){ for(i=0;i<checked.length;i++){ checked[i].checked=true } } //不选 unsele.onclick=function(){ for(i=0;i<checked.length;i++){ checked[i].checked=false } } //反选 clear.onclick=function(){ for(i=0;i<checked.length;i++){ if(checked[i].checked==true){ checked[i].checked=false } else{ checked[i].checked=true } } } } </script>
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。