title: When checkbox is checked show hidden button and hide the visible button
body: <p>I am a beginner in javascript, hopefully you can help me with this problem..</p>
  
  <p>I have 2 buttons in html form and 1 checkbox, 1 button should be hidden and the other is visible. My problem is how to show the hidden button and hide the visible button at the same time when the checkbox is checked.. </p>
  
  <p>I know how to hide/show the button <code>flip-ch1</code> but I can't do it to other button.</p>
  
  <p>I have a script here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#flip-ch1').hide();
    $('#radio').mouseup(function() {
      $('#flip-ch1').toggle();
  
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;
    &lt;input type="checkbox" name="radio" id="radio"&gt;
  
    &lt;button class="btn_style" id="ch1"&gt;Add&lt;/button&gt;
    &lt;button class="btn_style" id="flip-ch1"&gt;Add&lt;/button&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>