Question

I have these three checkboxes and a button that connects to another page. When that button is clicked, I want it to go to a page that is linked to the checkbox(es) that are checked.

    <div data-role="content" data-theme="a">    
        <h2>Checkboxes</h2>
        <div data-role="fieldcontain">

            <input type = "checkbox" name = "nameOne" id = "checkBoxOne" checked = "checked" />
                  <label for = "checkBoxOne">Checkbox One</label>                 
            <input type = "checkbox" name = "nameOne" id = "checkBoxTwo" />
                  <label for = "checkBoxTwo">Checkbox Two</label>    
            <input type = "checkbox" name = "nameOne" id = "checkBoxThree" />
                  <label for = "checkBoxThree">Checkbox Three</label>

            <p><a href="#linkToPage1" data-direction="reverse" data-role="button" data-theme="b" id="checkBoxesSaved">Continue</a></p>  
        </div>
    </div>

Now when no checkboxes are checked, I want the href to link to ‘#linkToPage1’, when the first checkbox is checked, I want it to link to ‘#linkToPage2’, when the second is checked ‘#linkToPage3’, when the third is checked ‘#linkToPage4’, when first and second are checked ‘#linkToPage5’, and so on.
So the ‘#linkToPageX’ should change according to the checkbox(es) that are checked.

Answer 1

Recent browsers have querySelectorAll :

   document.write("HTML5 : number of checked checkbox  :" + 
     document.querySelectorAll ("input[type='checkbox'][checked='checked']").length);

Try it on your browser on http://jsfiddle.net/LwtvK/