Monday, December 23, 2013

Checkbox


Events
Events
Description
onBlur
Code is executed when the focus is removed from the radio button.

onClick
Code is executed when user clicks on the radio button.

onFocus
Code is executed when the focus is set on the radio button.






Properties
Properties
Description
form
References the form that contains the reset button.
accessKey
String value that sets/ returns the accessKey for the button.
name
Reflects the name of the text field (the name attribute).
id
Reflects the id of the text field (the id attribute).
checked
Boolean property that reflects the current state of the radio button, "true" if it's checked, and "false" if not.

The ChildNode.nextElementSibling read-only property returns the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list.


HTML
  <input type="checkbox" value="VOne" checked="checked" id="r1" name="g" />
    <label for="r1">
        One</label>
    <input type="checkbox" value="VTwo" id="r2" name="g" />
    <label for="r2">
        Two</label>
    <input type="button" value="Status" onclick="MyFunction()" />

Javascript
function MyFunction() {
 var chk = document.getElementsByName("g");
 for (var i = 0; i < chk.length; i++) {

  if (chk[i].checked == true) {
   var str = "";

   str += "Checkbox at index " + i + " is checked!" +  "\n";

  str += "Value of Selected Checkbox: " + chk[i].value + "\n";

 str += "Text of Selected Checkbox:" + chk[i].nextElementSibling.innerHTML + "\n";


 alert(str);
   }
  }
}

Getting Text from nextSibling

  var element2 = chk[i].nextSibling;
  while (element2.nodeType != 1)
    {
    element2 = element2.nextSibling;
    alert(element2.innerHTML);
    }


defaultChecked
Boolean property that reflects the value of the CHECKED attribute.
HTML
<input type="checkbox" value="One" checked="checked" id="r1" name="g" />
    <label for="r1">
        One</label>
    <input type="checkbox" value="Two" id="r2" name="g" />
    <label for="r2">
        Two</label>

<input type="button" value="Status" onclick="MyFunction()" />

Javascript
function MyFunction() {
var status1 = document.getElementById('r1').defaultChecked;
            var status2 = document.getElementById('r2').defaultChecked;
            if (status1) {
                alert("r1 is checked by Default");
            }
            else if (status2) {
                alert("r2 is checked by Default");
            }
}

//Using For Loop:

function MyFunction() {
 var chk = document.getElementsByName("g");
 for (var i = 0; i < chk.length; i++) {

    if (chk[i].defaultChecked == true) {

     alert("Checkbox at index " + i + " is Default checked!");
     alert("Its Value is: " +chk[i].value);
     alert("Its Text: "+chk[i].nextElementSibling.innerHTML);

      }
  }
         
}
value
A read/write string that specifies the value of the radio button (the value attribute).
HTML
<input type="checkbox" value="One1" checked="checked" id="r1" name="g" />
    <label for="r1">
        One</label>  

<input type="button" value="Status" onclick="MyFunction()" />

Javascript
function MyFunction() {
  var value1 = document.getElementById('r1').value;
    alert(value1);   //returns:One1
}

type
A property available on all form elements, "type" returns the type of the calling form element, in this case, "radio".
disabled
Boolean value that sets/ returns whether the button is disabled.
tabindex
The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).
class
The class attribute specifies one or more classnames for an element.
style
The style attribute specifies an inline style for an element.
title
The title attribute specifies extra information about an element.
The information is most often shown as a tool tip text when the mouse moves over the element.

Methods
Methods
Description
blur()
Removes focus away from the radio button.

click()
Simulates a user clicking on the radio button.

focus()
Sets focus on the radio button.