return to default check box after change

I am working on drawing app. I have 2 tools(pencil and eraser) and some colors. Now when i select pencil i select a color but when i check the eraser and i want to select a color i want to check the pencil tool again but instead the eraser tool stays selected. I can select the color and start painting.

Any guidance is much appriciated.

Here is an example and the code:

Code:

Html:

<!-- Pencil & Eraser -->
<div class="graphic-tools">
  <!-- <div id="pencil" class="pencil"></div> -->
  <input checked="checked" id="pencil" type="radio" name="tool" value="pencil" />
  <label class="tool pencil" for="pencil"></label>
  <p class="">Potlood</p>

  <!-- <div id="eraser" class="eraser"></div> -->
  <input id="eraser" type="radio" name="tool" value="eraser" />
  <label class="tool eraser" for="eraser"></label>
  <p>Gum</p>
</div>

<!-- colors -->
<div id="colors" class="colors"></div>

JavaScript:

// Color swatches
var colors = ['#000000', '#274e8d', '#6bb44b', '#e5cd46', '#e98b3a', '#d83538'];

for (var i = 0, n=colors.length; i<n; i++) {
    var swatch = document.createElement('div');
    swatch.className = 'swatch';
    swatch.style.backgroundColor = colors[i];
    swatch.addEventListener('click', setSwatch);
    document.getElementById('colors').appendChild(swatch);
}

function setColor(color) {
    context.fillStyle = color;
    context.strokeStyle = color;

    var active = document.getElementsByClassName('activeSwatch')[0];

    if (active) {
        active.className = 'swatch';
    }
}

function setSwatch(e) {
    //identify swatch
    var swatch = e.target;
    //set color
    setColor(swatch.style.backgroundColor);
    //give active class
    swatch.className += ' activeSwatch';
}

setSwatch({target: document.getElementsByClassName('swatch')[0] });


// Determine Tool
document.getElementById('pencil').onchange = function() {
    if (this.checked) {
        tool = 'pencil';
        setSwatch({target: document.getElementsByClassName('swatch')[0] });
    }
};
document.getElementById('eraser').onchange = function() {
    if (this.checked) {
        tool = 'eraser';
        setColor('#FFFFFF');
    }
};