JavaScript ラジオボタン、複数選択ボックスの美化 code_form 特殊効果-jsチュートリアル-php.cn

JavaScript ラジオボタン、複数選択ボックスの美化 code_form 特殊効果

WBOY

リリース： 2016-05-16 19:02:12

オリジナル

833 人が閲覧しました

crir = {
init: function() {
arrLabels = document.getElementsByTagName('label');

searchLabels:
for (var i=0; i // for 属性に基づいて入力要素を取得しますラベルタグ
if ( arrLabels[i].getAttributeNode('for') && arrLabels[i].getAttributeNode('for').value != '') {
labelElementFor = arrLabels[i].getAttributeNode('for').value;
inputElement = document.getElementById(labelElementFor);
}
else {
続く searchLabels;
}

inputElementClass = inputElement.className;

// 入力が非表示に指定されている場合は、それが開始されます
if (inputElementClass == 'crirHiddenJS')
inputElement.className = 'crirHidden';

inputElementType = inputElement.getAttributeNode('type').value;

// 適切なイベントリスナーを入力要素に追加します
if (inputElementType == "checkbox") {
inputElement.on click = crir.toggleCheckboxLabel;

else {
inputElement.onclick = crir.toggleRadioLabel;

// 初期ラベル状態を設定します
if (inputElement.checked)
{ if (inputElementType == 'checkbox') { arrLabels[i].className = 'checkbox_checked' }
else { arrLabels[i].className = 'radio_checked' }
}
else {
if (inputElementType == 'checkbox') { arrLabels[i].className = 'checkbox_unchecked'}
else { arrLabels[i].className = 'radio_unchecked' }
}
}
else if (inputElement.nodeName != 'SELECT' && inputElement.getAttributeNode('type').value == 'radio') { // これは、無線が非表示ではなく、ある隠された無線のグループでも機能します。
arrLabels[i].onclick = crir.toggleRadioLabel;
inputElement.onclick = crir.toggleRadioLabel;
}
}
},

findLabel: function (inputElementID) {
arrLabels = document.getElements ByTagName('ラベル');

searchLoop:
for (var i=0; i if (arrLabels[i].getAttributeNode('for') && arrLabels[i].getAttribut eノード('for').value == inputElementID) {
return arrLabels[i];
searchLoop を中断します。
}
}
},

toggleCheckboxLabel: function () {
labelElement = crir.findLabel(this.getAttribut eNode('id').value);

if(labelElement.className == 'checkbox_checked') {
labelElement.className = "checkbox_unchecked";
}
else {
labelElement.className = "checkbox_checked";
}
},

toggleRadioLabel: function () {
clickedLabelElement = crir.findLabel(this.getAttributeNode('id').value);

clickedInputElement = this;
clickedInputElementName = clickedInputElement.getAttributeNode('name').value;

arrInputs = document.getElementsByTagName('input');

// 同じグループ内のすべての無線（ラベルクラス）のチェックを外します
for (var i=0; i inputElementType = arrInputs[i].getAttributeNode( 'タイプ').値;
if (inputElementType == 'radio') {
inputElementName = arrInputs[i].getAttributeNode('name').value;
inputElementClass = arrInputs[i].className;
// 変更したものと同じ「名前」を持つラジオボタンを見つけ、chkHidden
// そしてそれらをオフに設定します
if (inputElementName == clickedInputElementName && inputElementClass = = 'crirHidden') {
inputElementID = arrInputs[i].getAttributeNode('id').value;
labelElement = crir.findLabel(inputElementID);
labelElement.className = 'radio_unchecked';

}
}

// クリックされたラジオが非表示の場合ラベルをオンに設定します
場合(clickedInputElement.className == 'crirHidden') {
clickedLabelElement .className = 'radio_checked';
}
},

addEvent: function(element, eventType, doFunction, useCapture){
if (element.addEventListener)
{ element.addEventListener(eventType, doFunction、useCapture);
true を返します。
} else if (element.attachEvent) {
var r = element.attachEvent('on' eventType, doFunction);
r を返します。
} else {
element['on' eventType] = doFunction;
}
}
}

crir.addEvent(window, 'load', crir.init, false);

オンラインデモhttp://img.jb51.net/online/checkbox/sample。 html

パッケージのダウンロード JavaScript ラジオボタン、複数選択ボックスの美化 code_form 特殊効果

JavaScript ラジオボタン、複数選択ボックスの美化 code_form 特殊効果

CRIR.rar

JavaScript ラジオ ボタン、複数選択ボックスの美化 code_form 特殊効果

JavaScript ラジオボタン、複数選択ボックスの美化 code_form 特殊効果