jqueryを使って、チェックボックスの状態を取得して、チェックされている場合に何かしらの処理を行う場合があると思います。 ということで、とても簡単なサンプルですが、チェックボックスがチェックされている場合にアラートを出すサンプルをご紹介します。 HTMLのサンプル ...
【jquery】jqueryのshow()を使って、表示・非表示を切り替える(show)
divタグを表示・非表示にする方法はいくつかあると思いますが、 ここでは、showメソッドやhideメソッドを利用して「display:none」を切り替えたいと思います。 デモ ボタン1 ボタン2 ボタン3 1 2 3 試しに、上のボタン...
【jquery】jqueryを使ってラジオボタンのデフォルト設定を行う
ラジオボタンなどをシステムで動的に出力する事が多々あると思います。 ココでは、ラジオボタンを動的に出力した際、デフォルト選択状態をjqueryで設定する方法をご紹介します。 ちなみにサンプルは、ラジオボタンの選択値を配列で受け取るために、 同じ名前で配列化しています。...
【HTML】submitとbuttonの挙動
今更ですが、若干はまりかけたのでおぼえがき。。。。 ① ② button属性のボタン 上記のような2種類のボタンがあった場合、 ①のボタンはformタグで指定したaction先へ遷移し、②は遷移しないと思っていた。 が、これが誤りで・・・下記のように記述しないとダ...
【jquery】jqueryを使ってテーブルに新規行を追加する
一覧形式の入力画面などの場合、 表示されている表に対して、1行追加してデータを入力するような機能があると思います。 色んなやり方があると思いますが、今回はダミー行をコピーして追加する方法を紹介したいと思います。 サンプルソース 行追加 No タイプ...
【jquery】jqueryを使って画面の全ての要素をdisabled設定する
会員登録画面や、編集画面などで規約に同意するチェックボックスをチェックしないと入力項目に入力できない そんな画面の場合に、要素(入力項目)に対してdisabledを設定する方法があると思いますが、 要素が多いと面倒なので、jqueryを使って出来る限り簡素化しようと思いま...
【jquery】ファイル選択ダイアログでファイル名を取得する(HTML5 FileAPI)
jqueryを使って、ファイル選択ダイアログにて選択されたファイルのファイル名を取得してみます。 アップロードするファイル名が決まっていたり、サイズに制限があったりする場合、 クライアント側でチェック出来れば便利かなと思い調べてみました。 ちなみにこの方法はHTML5...
【CSS】CSSのみでテーブルの行を1行おきに背景色を変更(nth-child)
テーブルの行背景色を偶数行と奇数行で背景を変えたいときなど、 CSSの「nth-child」を使えば簡単に出来るみたいです。 CSSのサンプル table.test tbody tr:nth-child(2n+1) { background-color:#69696...
【CSS】CSSだけでフローティング(ついてくる)ボタン
画面をスクロールしても、いつも決まった位置(固定位置)にいるボタンをを作ってみます。 jqueryのプラグインを使うとアニメーションをしたり、色々凝ったことができますが、 ここでは簡単にCSSだけで作ってみます。 CSSのサンプル .floating { top:...
【CSS】HTMLのテキストボックスをラベルのように
HTMLのテキストボックスをラベルのような見た目に変更する方法を紹介します。 ここではラベルとは、入力できない編集不可の項目をさしてます。 テキストボックスで作られた項目が仕様変更などにより編集不可になった場合、 disabledやreadonly、ラベルなど色々方法...