CODEWITHSUNDEEP
javascript
Hexen
Hexen

Reputation: 27

How to change the checked value using javascript

I am trying to change the radio button that is checked by default and I cannot access the html to do so, but I can use javascript. Here is the html 

<div class="row" id="courseSearchAvailability">
        <div class="col-xs-12">
          <fieldset class="accessibility">
            <legend>
              Filter By Course Availability
            </legend>

         <div class="radio">
              <label> 
                <input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable"> 
                Search scheduled courses 
              </label>
            </div>
             <div class="radio">
              <label> 
                <input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll"> 
                Search all courses 
              </label>
            </div>
          </fieldset>
        </div>
      </div>

I want to make the searchAvailable the default and here is the javascript that I'm using and it doesn't seem to work. I'm new to this so be nice lol.

var sel = document.getElementById('searchAvailable');
sel.searchALL.removeAttribute('checked');
sel.searchAvailable.setAttribute('checked', 'checked');
document.forms[0].reset();

Upvotes: 1

Views: 43

Answers (1)

dfsq
dfsq

Reputation: 193261

Just these two lines should be enough:

var sel = document.getElementById('searchAvailable');
sel.checked = true;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="courseSearchAvailability">
    <div class="col-xs-12">
        <fieldset class="accessibility">
            <legend>Filter By Course Availability</legend>
            <div class="radio">
                <label>
                    <input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">Search scheduled courses</label>
            </div>
            <div class="radio">
                <label>
                    <input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">Search all courses</label>
            </div>
        </fieldset>
    </div>
</div>

Upvotes: 3

Related Questions