Search code examples
javascripthtmlyui

javascript - edit buttons within the same div but multiple spans

I'm looking for a solution to change multiple buttons to an unchecked state each time a button is clicked. Here's the div

<div id="season" align="center">
     <span class="yui-button yui-radio-button yui-button-checked yui-radio-button-checked" id="season">
          <span class="first-child">
               <button type="button" id="season-button">Spring</button>
          </span>
     </span>
     <span class="yui-button yui-radio-button" id="season">
          <span class="first-child">
                <button type="button" id="season-button">Summer</button>
          </span>
     </span>
     <span class="yui-button yui-radio-button" id="season">
          <span class="first-child">
               <button type="button" id="season-button">Fall</button>
          </span>
     </span>
     <span class="yui-button yui-radio-button" id="season">
          <span class="first-child">
               <button type="button" id="season-button">Winter</button>
          </span>
     </span>
</div>

I can access the buttons by doing:

var groupName = document.getElementById(id).getElementsByTagName("button")

but if I try

    for (i = 0; i < groupName.length; i++) {
         groupName[i].set("checked", false);
    }

nothing happens

Any help is greatly appreciated!

Thanks!

Solution

  • Checked isn't a valid attribute for <button>'s. If you want radio like buttons, use <input type="radio"> and style them like buttons. Take a look at the official YUI Grouped Button example for how to do this.