このような単純な質問でお手数をおかけして申し訳ありませんが、私はあらゆる場所を見てきましたが、私がやりたいことを行うための正しい構文を理解できないようです.
基本的に、大量のチェックボックスを備えたフォームがあり、ユーザーがそれらすべてを同時にチェックできるようにしたい (またはすべてチェックを外したい)
私はこの素晴らしいスクリプトに出くわしました
$(function () {
$('.checkall').click(function () {
$(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
});
});
しかし、入力ボタンの onclick イベントを設定してスクリプトを実行しようとしても、何も起こりません。
<input type="button" class="blkbuttonsmall" value="Toggle All/None" onclick="**what-do-i-use-here-to-run?**">
どんな助けでも大歓迎です！
編集
それで、昨夜2つの答えを試しましたが、成功しませんでした。私の側に通信エラーがあった場合、私がまだ何か間違ったことをしているのかどうかはわかりません。そこで、私が試してみてうまくいかなかったさまざまなことと、ページの設定方法についてもう少し詳しく説明します。
チェック ボックスと入力ボタンにはそれぞれ独自のクラスがあり、それらを使用して外観のスタイルを設定しています。これらは、このスクリプトの実行を考慮する前に、そのようにコーディングされています。
すべて選択ボタン
<input type="button" class="blkbuttonsmall" value="Toggle All/None">
チェックボックス
<input type="checkbox" name="X" id="X" class="formcheck">
それで、昨夜提供された提案を取り入れて（迅速な返信をありがとう）すべて選択ボタンのクラスを「blkbuttonsmall checkall」と「checkall」の両方に変更してみました。それがうまくいかなかったとき、私はいくつかのチェックボックスに「checkall」クラスを適用し、「formcheck」クラスを削除して「checkall」クラスを追加しようとしました。それでも、何もありません。これは、私が物事を正しく実装していないか、最初の質問で適切に説明していないはずだと私に信じさせます。
提案された編集を試す前に、コードの HTML スニペットをいくつか示します。
フォームの左側の div:
<div class="formleft">
<br />
<form action="">
<span class="formtext">Check all that apply</span>
<br />
<br />
<script>
$(function () {
$('.checkall').click(function () {
$(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
});
});
</script>
<fieldset>
<input type="checkbox" name="logincheck" id="logincheck" class="formcheck"> login
<br />
<input type="checkbox" name="assignbreakbusylogoutcheck" id="assignbreakbusylogoutcheck" class="formcheck"> assignment, break, busy, logout
<br />
<input type="checkbox" name="acceptprocesscallscheck" id="acceptprocesscallscheck" class="formcheck"> accept/process tasks, calls
<br />
</div>
... フォームの右側の div
<div class="formright">
<br />
<!-- when button is clicked we need to toggle all checks on or off -->
<input type="button" class="blkbuttonsmall" value="Toggle All/None">
<br />
<input type="checkbox" name="userprofilecheck" id="userprofilecheck" class="formcheck"> user profile
<br />
<input type="checkbox" name="searchcheck" id="searchcheck" class="formcheck"> search
<br />
<input type="checkbox" name="addcheck" id="addcheck" class="formcheck"> add
<br />
<input type="checkbox" name="editcheck" id="editcheck" class="formcheck"> edit
</fieldset>
</form>
</div>
そして、私がjquery宣言を台無しにしたポンセではないことを確認するために、ファイルのヘッダーを次に示します。
<head>
<meta charset="utf-8">
<title>web portal configurations</title>
<link rel="icon" href="images/favicon.ico" type="image/x-ico">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=.5, maximum-scale=1">
</head>
jquery ファイルは、jquery のサイトで提供されている最新の縮小版で、私のサーバーにローカルにアップロードされたばかりです。
ここで何が欠けているか、間違っていますか? 以前の回答の概念を理解しているので、問題は私が見逃したものか、実装にあるに違いありません。繰り返しますが、私は提供された助けに感謝します!