ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

JavaScript

jQueryプラグインChosenでクリックして選択できない現象

jQueryプラグインのChosenを適用して動作確認をしたところ、一度非表示にして再度表示にすると、Chosenを適用したセレクトボックスが無効状態のままになることに気がつきました。表示/非表示の切り替えは、以前書いた記事の方法で行っています。 JavaScript…

jQueryプラグインChosenで選択肢の表示幅が狭くなる現象

jQueryプラグインのChosenを適用して動作確認をしたところ、選択肢を選択するためにクリックすると、選択肢を表示をする部分の幅が狭く表示されました。 原因を調べる Chosen適用前のselectタグに幅を指定していますが、Chosen適用後に幅の指定はしていませ…

jQueryプラグインChosenで選択肢の動的変更方法

3年前に記事に書いた、jQueryプラグインのChosenで、他の選択肢に選択結果により、選択肢を動的に変更しなければならくなりました。 ajya.hatenablog.jp unsplash-logoPankaj Patel試した結果として、以下のようにすればできました。 // 選択肢削除 $('#sele…

JavaScript:htmlの書き換え方法

選択肢によって、必須マークの表示/非表示を切り替えなければならなくなりました。 操作するhtmlは以下のようになっています。 <body> <p> <span class='require'> <img src='./require.gif' alt='必須'>&nbsp; </span> 項目名 </p> </body> unsplash-logoDean Pugh非表示は、.remove()か.empty()を使ってspanタグ内を消してしまえばできるだろうと…

JavaScript:Internet Explorer 11だけは、子孫要素をまとめて無効にできる?

以前、テーブル内の子孫要素をまとめて無効にするためには、find()とeach()を使うと書きました。 ajya.hatenablog.jpこのとき、当初は $(".rowall").css("display", "none").prop('disabled', true); としていました。この記述を残したまま、以前の記事に書…

JavaScript:要素に割り当てたクラスが何個目になるのか取得する

inputタグのテキストボックスにクラスを割り当てていて、何個目のinputタグのテキストボックスに入力されたのか取得しなければならなくなりました。調べたところ、以下のようにjQueryのindex()を使うことで取得できました。 index(subject) - jQuery 日本語…

JavaScript:子孫要素をまとめて無効にする

テーブルの複数行をまとめて非表示にする方法として、tbodyタグでtrタグを挟んで、tbodyを指定して操作すると書きました。 ajya.hatenablog.jpテーブルの中にはinputタグが複数あり、非表示にしたときは、inputタグを無効にしたかったので、 $(".rowall").cs…

JavaScript:数値を3桁区切りにする方法はどうするのが無難?

JavaScriptで計算後表示をしたところ、4桁の数字になることに気がつきました。 4桁の数字になると、3桁毎のカンマ区切りをしないと違和感を感じます。3桁毎の区切りをする方法を検索すると、正規表現を使ったり、ループで回してつけたりする情報が見つかりま…

JavaScript:テーブルの複数行の表示/非表示をまとめて行うなら、tbodyタグを利用する

ラジオボタンの選択により、テーブルの複数行をまとめて表示/非表示を切り替えなくてはならくなりました。 trタグにclassを記述していれば、非表示にするには、 $(".row").css("display", "none"); でできて、表示にするには、 $(".row").css("display", ""…

JavaScript:ラジオボタンの値を取得してswitch文で分岐するときに少し悩む

jQueryで選択されているラジオボタンの値を取得して、switch文で処理を分岐させようとしました。 ラジオボタンのvalueには、数字を割り当てていたので以下のようにswitch文を書き、ラジオボタンをクリックしましたが、どちらのcaseにも該当せず処理がされま…

JavaScript:テキストボックスに値を入れてもchangeイベントが発生しない場合の対処

JavaScriptというかjQueryでテキストボックスに値を代入すると、代入されたら内容が変化するのでchangeイベントが発生すると思っていました。 $("input[name='abc']").val("テスト"); 実際には発生しません。内容が変化したらchangeイベントが発生しないとコ…

JavaScript:別ウィンドウ内のiframeで選択した内容を親ウィンドウのテキストボックスに設定する

Webサイトで、選択ボタンをクリックしたら、別ウィンドウを表示し、別ウィンドウで検索を行うと別ウィンドウ内のiframeに検索結果を表示するようにしました。 iframeの検索結果をクリックして、クリックした値を、別ウィンドウの親ウィンドウにあたるWebサイ…

JavaScript:val()メソッドを使わないでラジオボタンがチェックされているか判定する方法はないのか?

以前の記事にも書きましたが、JavaScriptでラジオボタンが選ばれているか取得するには、jQueryを使う場合、 if (!$("input:radio[name='check1']:checked").val()) { alert("チェックされていません"); } や var isCheck1 = $("input:radio[name='check1']:c…

JavaScript:一覧表の中のラジオボタンの周囲の色の変更方法

一覧表の中にラジオボタンがあり、他の要素の選択により、ラジオボタンの有効/無効を切り替えていました。 ラベル1 ラジオボタン1 ラベル2 ラジオボタン2 ラジオボタンのボタンの有効/無効を切り替えると同時に、ラジオボタンが配置されているセルの色も変…

JavaScript:子ウィンドウから親ウィンドウを再読み込みさせる方法 の訂正

5年近く前に書いた以下の記事のjQueryを使う書き方をそのままソースコードに書いたら動作しませんでした。 ajya.hatenablog.jpjQueryを使わない以下の書き方では動作しました。 window.opener.document.getElementById("search").submit(); window.close(); …

JavaScript:計算誤差の対処

JavaScriptで計算している部分で、想定と異なる結果になる場合がありました。 具体的には、36.3×700=25,410になるはずですが、25,409になります。ブラウザのデバッガで値を確認しても、36.3と700のまま掛け算をしていますが、25,409になります。 検索すると…

JavaScript:要素が有効な場合のみ、チェックされているか判定する方法

ラジオボタンAの選択によって、別のラジオボタンBの有効/無効状態を切り替えている場合に、JavaScriptでラジオボタンBがチェックされているかチェックをすると、ラジオボタンBが無効状態でもチェックはできてしまいます。そのため、ラジオボタンAの選択を確…

JavaScript:ラジオボタンの選択に従って、他のラジオボタンを制御するときの考え方

以下のようなname属性がtopとsubのラジオボタンがあります。 <input type="radio" name="top" value="4">top4 <input type="radio" name="top" value="5">top5 <input type="radio" name="top" value="44">top44 <input type="radio" name="top" value="0">top0 <input type="radio" name="sub" value="100">sub4

ブラウザがSafariでも、タブで開いているウィンドウをJavaScriptで閉じる方法

先日3年前に稼働させたシステムを再度稼働させる業務を行っていると書きました。 ajya.hatenablog.jpこのシステムに、作業が終わったら終了ボタンを押して、Webブラウザのウィンドウを閉じてもらうようになっている画面があります。 Internet Explorer 11で…

JavaScript:jQuery:複数のチェックボックスのうち、特定チェックボックスにチェックされたとき、入力欄を有効にする方法

複数のラジオボタンがあって、その他を選ばれた場合だけその他を入力してもらうための入力欄を有効にしなければならなくなりました。 手っ取り早く以下の方法で実現しました。HTML側その他を選ばれているか判定するために、id属性をその他にだけ追加します。 <form method="POST" action="next.php"></form>…

JavaScriptのオブジェクトを少し学びました

あるシステムで、データに対して5から-2の点数をつけることになりました。 複数のデータに対して、それぞれ点数をつけなければなりません。 何点を何個つけたのかを数える機能も必要です。例えば、3個データがあって、2個のデータに2点、1個のデータに-1点を…

JavaScript:クリップボードを操作できるライブラリ

先日この記事を読んでツイートしました。 clipboard.js - Flashなしでも使えるクリップボード操作ライブラリ MOONGIFTSafariでは使えないけど、Edgeでは使えるのかな?/clipboard.js - Flashなしでも使えるクリップボード操作ライブラリ MOONGIFT https://t…

JavaScript:ラジオボタンがチェックされているか判定する方法

jQueryを使える場合 if (!$("input:radio[name='check1']:checked").val()) { alert("チェックされていません"); } で判定できます。 jQueryを使えない場合 var i; var flg = false; for (i = 0; i < document.form1.elements['check1'].length; i++) { if (…

JavaScriptが動かなくなった原因

全く修正していない部分が動作しなくなったので焦りました。 photo credit: JavaScript: The Good Parts via photopin (license)JavaScriptが動作しない1年以上前に同僚が作成したプログラムを元に、文字や色等見た目を変更して、新たに利用できるように設定…

JavaScriptでdiv要素の位置を設定

意外なところに落とし穴があって、悩みましたが解決しました。 photo credit: Selvin George via photopin (license)ブラウザをリサイズされているときでも、JavaScriptを使ってdiv要素を表示領域の中央に配置したくて調べました。表示領域のサイズを取得す…

JavaScript:同一クラスを割り当てたチェックボックスを択一選択にするJavaScriptが正常に動かなくなっていて焦りました

複数から1つだけ選べる択一選択にするなら、ラジオボタンにすべきです。 選択した後で、選択しないということもあるため、チェックボックスになっています。チェックボックスで択一選択にする方法JavaScriptで、チェックされるたびに、同一クラスを割り当て…

JavaScript:jQuery:参加者のチェックボックスのON/OFFで、同行者のチェックボックスがあるセルの背景色を変更する方法

昨日の記事でチェックボックスの有効/無効の切り替え方を書きました。 JavaScript:jQuery:参加者のチェックボックスのON/OFFで、同行者のチェックボックスの有効/無効を切り替える方法 - ソフトウェア開発者の日常 JavaScript:jQuery:参加者のチェックボ…

JavaScript:jQuery:参加者のチェックボックスのON/OFFで、同行者のチェックボックスの有効/無効を切り替える方法

代表の参加者が選んだセミナーのみ、同行者が参加できるようにシステムを作成して欲しいと要望がありました。入力する画面では制限をもうけず、入力内容を確認する画面で判定して表示することも考えましたが、手間がかかります。 入力画面で代表の参加者が選…

JavaScript:型を意識していなかったために起きた現象

数値を比較するのか、文字を比較するのか、意識してコーディングするのが基本なのに、基本を怠っていました。 photo credit: Dmitry Baranovskiy via photopin cc比較が正しく行われないPHPとJavaScriptで作られたページがあります。 PHPで処理した結果、 <input type="hidden" id="cnt" value="4"> <input type="hidden" id="max" value="15"> …

JavaScriptで単語数カウント

現在は文字数を1秒ごとに取得している部分を、単語数に変更したいとの要望があり、対応しました。単語数なので、区切りをスペースにすればいいというのはすぐに思いつきましたが、「,」と「.」も対応するとなると、何度も区切る処理が必要になります。 単純…