English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

JSでチェックボックスの全選択機能を実現するサンプルコード

要望:全選択をクリックして全てのメニューを選択し、再度全選択をクリックして選択を解除する機能を実装する必要があります。この機能はよくユーザーに求められます。以下に、編集者が皆さんに実装コードを共有しますので、ご覧ください!

効果画像は以下の通りです:

全選択をクリックする前に:

全選択をクリックした後:

全選択を再度クリックした後:

以下はコードです:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<input type="checkbox" onclick="quanxuan()">全选 
<input type="checkbox" name="nation">歌う 
<input type="checkbox" name="nation">踊り 
<input type="checkbox" name="nation">書道 
</body> 
<script type="text/javascript"> 
var k=0; 
function quanxuan(){ 
var s=document.getElementsByName("nation"); 
if(k%2==0) 
{ 
for(var i=0;i< s.length;i++) 
{ 
s[i].checked=true; 
} 
k++; 
} 
else { 
for(var j=0;j< s.length;j++) 
{ 
s[j].checked=false; 
} 
k++; 
} 
} 
</script> 
</html> 

上記の内容は、JSでcheckbox全選択機能を実現するサンプルコードを紹介しました。皆様に役立つことを願っています。何かご不明な点がございましたら、コメントを残してください。編集者はすぐにご回答いたします。このサイトへのサポートに感謝します!

声明:この記事の内容はインターネットから収集され、著作権者が所有、インターネットユーザーが自発的に貢献し、自分でアップロードしたものであり、このサイトは所有権を持ちません。また、人工的な編集は行われていません。著作権に関する問題がある場合は、メールを送信してください:notice#oldtoolbag.com(メールを送信する際に、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとりたいと、このサイトはすぐに侵害が疑われるコンテンツを削除します。

おすすめ