www.webdeveloper.com
Results 1 to 2 of 2

Thread: remove onclick event from checkbox nested within h2

  1. #1
    Join Date
    Dec 2008
    Posts
    9

    remove onclick event from checkbox nested within h2

    I have the following javascript for an 'accordian' style html widget.

    Code:
    var accordionItems = new Array();
    
        function init(id) {
    
          // Grab the accordion items from the page
          var divs = document.getElementById(id).getElementsByTagName( 'div' );
          for ( var i = 0; i < divs.length; i++ ) {
            if ( divs[i].className == 'accordionItem' ) accordionItems.push( divs[i] );
          }
    
          // Assign onclick events to the accordion item headings
          for ( var i = 0; i < accordionItems.length; i++ ) {
            var h2 = getFirstChildWithTagName( accordionItems[i], 'H2' );		
    		h2.onclick = toggleItem;
          }
    
          // Hide all accordion item bodies except the first
          for ( var i = 0; i < accordionItems.length; i++ ) {
            accordionItems[i].className = 'accordionItem hide';
          }
        }
    
        function toggleItem() {
          var itemClass = this.parentNode.className;
    
          // Hide all items
          for ( var i = 0; i < accordionItems.length; i++ ) {
            accordionItems[i].className = 'accordionItem hide';
          }
    
          // Show this item if it was previously hidden
          if ( itemClass == 'accordionItem hide' ) {
            this.parentNode.className = 'accordionItem';
          }
        }
    
        function getFirstChildWithTagName( element, tagName ) {
          for ( var i = 0; i < element.childNodes.length; i++ ) {
            if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
          }
        }
    And here is the HTML:

    HTML Code:
            <div id="example1">
                    <div class="accordionItem">
                      <h2 id="one"><strong>1: Lorem</strong><input type="checkbox" value="1" name="select1" /></h2>
                      <div>
                       <img src="images/image1.jpg" />
                       <p>Lorem ipsum.</p>
                       <p>Lorem ipsum.</p>
                      </div>
                    </div>
                
                    <div class="accordionItem">
                      <h2 id="two"><strong>2: Ipsum</strong><input type="checkbox" value="2" name="select1" /></h2>
                      <div>
                       <img src="images/image2.jpg" />
                       <p>Lorem ipsum.</p>
                       <p>Lorem ipsum.</p>
                      </div>
                    </div>
            </div>
    I have nested checkboxes within each <h2> but I need them to behave independently of the onclick event that is set to the <h2> in the javascript.

    In other words, when I select a checkbox, I don't want the onlick event to trigger.

    Many Thanks!

  2. #2
    Join Date
    Dec 2008
    Posts
    9
    Sorry, I missed off the <body> tag:

    HTML Code:
    <body onLoad="init(example1);">

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles