今日は 2 つの JavaScript の小技を紹介します。理由は非常にシンプルで、最近 CG はウェブサイトのフォームと以前のソニープロジェクトの改修をしている際に、HTML フォーム内のラジオボタンの値の制御や選択制御が非常に困難であることに気づいたためです。特に JSP を使用する場合は、この問題を解決するために 2 つの JavaScript の小技を紹介します。
問題 1：テーブルの各行のラジオボタンをクリックした後、自動的に選択され、ラジオボタンの value 属性が変更されるかどうか。
解決方法：テーブル行をトリガーとしてクリックした場合、すべてのラジオボタンを繰り返し処理し、ラジオボタンの value と選択された value の差を比較し、その後、この行のラジオボタンを選択するかどうかを制御します。
以下は JS コードです。
// IdValue の値を更新する
//
function updateIdValue(obj, radioName) {
var cellText;
cellText = obj.cells[1].innerHTML.toString();
if (!radioName) return;
if (getRadioValue(radioName) != cellText) {
setCheckedValue(radioName, cellText);
}
IdValue = cellText; // 更新
}
// ラジオボタンの選択状態を設定する
function setCheckedValue(radioName, newValue) {
var radios = document.getElementsByName(radioName);
for (var i = 0; i < radios.length; i++) {
if (radios[i].value == newValue) {
radios[i].checked = true;
break;
}
}
}
以下はデモの効果です。
http://www.lidaren.com/code/JsRadio.htm
問題 2：動的に生成されたページでラジオボタンと対応する value を生成できない。
解決方法：ページの読み込み後、すべてのラジオボタンを繰り返し処理し、一致する value があるかどうかを比較し、一致する場合は直接選択します。
以下は JS コードです。
// 編集ページのチェックボックスの選択状態を設定する
function setRadioChecked(val, radioName) {
var radios = document.getElementsByName(radioName);
for (var i = 0; i < radios.length; i++) {
if (radios[i].value == val) {
radios[i].checked = true;
break;
}
}
}
李大仁のブログのオリジナル記事です。転載は歓迎ですが、出典を明記してください。