<myns:checkbox  id=''cbx_1'' label=''Checkbox HTC'' labelonleft=''true'' value=''false'' onItemChanging=''fktOnItemChanging()'' onItemChanged=''fktOnItemChanged()'' />
<br/>
<myns:checkboxvl id=''cbx_2'' label=''Checkbox HTC + ViewLink'' onItemChanging=''fktOnItemChanging()'' onItemChanged=''fktOnItemChanged()'' />

</BODY>
</HTML>

另外需要引入的文件 CheckBox.htc

<PUBLIC:COMPONENT NAME="cbx" tagName="CHECKBOX">
<PROPERTY NAME="label" />
<PROPERTY NAME="checked" GET="getChecked" PUT="putChecked" />
<PROPERTY NAME="labelonleft" VALUE="true"/>
<PROPERTY NAME="value" GET="getValue" PUT="putValue" />
<PROPERTY NAME="onValue" VALUE="true"/>
<PROPERTY NAME="offValue" VALUE="false"/>
<METHOD NAME="show"/>
<EVENT NAME="onItemChanging" ID="onItemChanging"/>
<EVENT NAME="onItemChanged" ID="onItemChanged" />
<ATTACH EVENT="oncontentready" HANDLER="constructor" />

<SCRIPT >

 var _value;
 
 function constructor()  {
  var s;
  s = ''<INPUT name="cb_''+ uniqueID + ''" id="cb_'' + uniqueID + ''" type="checkbox" '' +
   ''onclick="'' + uniqueID + ''.checked= +cb_'' + uniqueID+ ''.checked" '';
  if( _value == onValue )
   s +='' checked="true" '';
  s+= "/>";
  element.insertAdjacentHTML(''afterBegin'', s);
  element.insertAdjacentHTML((labelonleft == "true")?''afterBegin'':''beforeEnd'',
   ''<LABEL for="cb_'' + uniqueID+ ''">'' + label + ''</LABEL>'');
 }

 function putChecked( newValue ) {
  value = (newValue?onValue:offValue);
 }

 function getChecked(){
  return ( _value == onValue);
 }

 function getValue(){
  return _value ;
 }

 function putValue( newValue ) {
  if (window.event == null)
   _value = newValue; /* initial*/
  else if (_value != newValue) {
   var oEvent = createEventObject();
   oEvent.newValue = newValue;
   oEvent.returnValue = true;
   onItemChanging.fire(oEvent);
   if (oEvent.returnValue)
    _value = newValue;
   eval(''cb_''+uniqueID).checked= ( _value == onValue );
   if (_value == newValue)
    onItemChanged.fire(oEvent);  
  }
 }

 function show(bCmdShow){
  style.visibility= (bCmdShow?''visible'':''hidden'') ;
 }

</PUBLIC:COMPONENT>

第3个文件 CheckBoxVL.htc

<PUBLIC:COMPONENT NAME="cbxvl" tagName="CHECKBOXVL">
<PROPERTY NAME="label" />
<PROPERTY NAME="checked" GET="getChecked" PUT="putChecked" />
<PROPERTY NAME="labelonleft" VALUE="true"/>
<PROPERTY NAME="value" GET="getValue" PUT="putValue" />
<PROPERTY NAME="onValue" VALUE="true"/>
<PROPERTY NAME="offValue" VALUE="false"/>
<METHOD NAME="show"/>
<EVENT NAME="onItemChanging" ID="onItemChanging"/>
<EVENT NAME="onItemChanged" ID="onItemChanged" />
<ATTACH event="oncontentready" handler="constructor"/>

<PUBLIC:DEFAULTS viewLinkContent/>

<SCRIPT >

 var _value;
 function constructor()  {
  var s;
  s = ''<INPUT name="cbx" id="cbx" type="checkbox" onclick="element.checked=this.checked"'';
  if( _value == onValue )
   s +='' checked="true" '';
  s+= "/>";
  document.body.insertAdjacentHTML(''afterBegin'', s);
  document.body.insertAdjacentHTML((labelonleft == "true")?''afterBegin'':''beforeEnd'',
   ''<LABEL for="cbx">'' + label + ''</LABEL>'');
 }

 function putChecked( newValue ) {
  value = (newValue?onValue:offValue);
 }

 function getChecked(){
  return ( _value == onValue);
 }

 function getValue(){
  return _value ;
 }

 function putValue( newValue ) {
  if (window.event == null)
   _value = newValue; /* initial*/
  else if (_value != newValue) {
   var oEvent = createEventObject();
   oEvent.newValue = newValue;
   oEvent.returnValue = true;
   onItemChanging.fire(oEvent);
   if (oEvent.returnValue)
    _value = newValue;
   cbx.checked= ( _value == onValue );
   if (_value == newValue)
    onItemChanged.fire(oEvent);  
  }
 }

 function show(bCmdShow){
  style.visibility= (bCmdShow?''visible'':''hidden'') ;
 }

</SCRIPT>
</PUBLIC:COMPONENT>