android 单选按钮对号,用“对号”和“叉号”代替单选框和复选框选中或未选中代码详解...

用“对号”和“叉号”代替单选框和复选框选中或未选中代码，使用javascript+css可以实现这样的操作！

效果如图：

/p>

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

/>

/>

/>

Free图库网-BIR - Boolean Input

Replacement Sample

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

searchLabels: for (var i=0; i

{ // get the input element based on the for attribute of the label

tag if (arrLabels[i].getAttributeNode('for')

&&

arrLabels[i].getAttributeNode('for').value != '')

{ labelElementFor =

arrLabels[i].getAttributeNode('for').value; inputElement =

document.getElementByIdx_x_x(labelElementFor); } else { continue searchLabels; }

inputElementClass = inputElement.className;

// if the input is specified to be hidden intiate

it if (inputElementClass == 'crirHiddenJS')

{ inputElement.className = 'crirHidden';

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

// add the appropriate event listener to the input

element if (inputElementType == "checkbox") { inputElement.onclick =

crir.toggleCheckboxLabel; } else { inputElement.onclick =

crir.toggleRadioLabel; }

// set the initial label state 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') { // this

so even if a radio is not hidden but belongs

to a group of hidden radios it will still

work. arrLabels[i].onclick =

crir.toggleRadioLabel; inputElement.onclick =

crir.toggleRadioLabel; } } },

findLabel: function (inputElementID) { arrLabels = document.getElementsByTagName_r('label');

searchLoop: for (var i=0; i

{ if (arrLabels[i].getAttributeNode('for')

&&

arrLabels[i].getAttributeNode('for').value == inputElementID)

{ return arrLabels[i]; break searchLoop; } } },

toggleCheckboxLabel: function () { labelElement =

crir.findLabel(this.getAttributeNode('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_r('input');

// uncheck (label class) all radios in the same

group for (var i=0; i

{ inputElementType =

arrInputs[i].getAttributeNode('type').value; if (inputElementType == 'radio') { inputElementName =

arrInputs[i].getAttributeNode('name').value; inputElementClass =

arrInputs[i].className; // find radio buttons with the same 'name' as the one we've changed

and have a class of chkHidden // and then set them to unchecked if (inputElementName == clickedInputElementName

&& inputElementClass ==

'crirHidden') { inputElementID =

arrInputs[i].getAttributeNode('id').value; labelElement =

crir.findLabel(inputElementID); labelElement.className =

'radio_unchecked'; } } }

// if the radio clicked is hidden set the label to

checked if (clickedInputElement.className == 'crirHidden')

{ clickedLabelElement.className =

'radio_checked'; } },

addEvent: function(element, eventType, doFunction,

useCapture){ if (element.addEventListener) { element.addEventListener(eventType, doFunction,

useCapture); return true; } else if (element.attachEvent) { var r = element.attachEvent('on' + eventType,

doFunction); return r; } else { element['on' + eventType] = doFunction; } } }

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

class="code"> 

CRIR: Checkbox Radio Input

Replacement 

method="get"> 

多选框

 

for="checkbox1">普通的.

 

type="checkbox" value="true"

/> This is the

Label 

type="checkbox" value="true" class="crirHiddenJS"

/>

for="checkbox3">This is the Label with a long

name

 

type="checkbox" value="true" class="crirHiddenJS" checked="checked"

/>

for="checkbox4">This is the

Label

 

type="checkbox" value="true" class="crirHiddenJS"

/> 

单选框

 

for="radio1">普通的。

 

value="true"

/> This is the

Label 

value="true" class="crirHiddenJS"

/>

This is the Label

with a long

name 

value="true" class="crirHiddenJS" checked="checked"

/> 

for="radio4">This is the

Label

 

value="true" class="crirHiddenJS"

/>