Saturday 25 April 2015

HTML - Getting CheckBox value with using JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function myFunction() {
            var selectedVal = "";
            if (document.getElementById("bus").checked == true) {
                selectedVal = document.getElementById("bus").value;
            }
            else {
                selectedVal = selectedVal;
            }
            if (document.getElementById("train").checked == true) {
                selectedVal = selectedVal + ", " + document.getElementById("train").value;
            }
            else {
                selectedVal = selectedVal;
            }
            if (document.getElementById("walk").checked == true) {
                selectedVal = selectedVal + ", " + document.getElementById("walk").value;
            }
            else {
                selectedVal = selectedVal;
            }
            
            document.getElementById("demo").innerHTML = selectedVal;
            return selectedVal;
        }
    </script>
</head>
<body>
    <input type="checkbox" id="bus" name="bus" value="Bus" />Bus
    <input type="checkbox" id="train" name="train" value="Train" />Train
    <input type="checkbox" id="walk" name="walk" value="By Walk" />By Walk
    <input type="submit" onclick="myFunction()" value="Get Value" />
    <p id="demo">
    </p>

</body>
</html>