title: How do I get a label to check a radio input when clicked?
body: <p>I am creating a user login/register form on a website and I'm using radio inputs to display either the login form or the register form. Upon loading the page, it defaults to the login form. If the Register link (really a label for an input) at the bottom is clicked it hides the login form and replaces it with the register form. This part is working fine.</p>
  
  <p>The problem is when you are on the register form and you click the Login link (again, a label for an input) at the bottom of the form, it stays on the register form. I have used the browser code inspector and it continues to list login as checked even when it is showing the register form.</p>
  
  <p>Here is the <code>css</code> and <code>html</code>:</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-css lang-css prettyprint-override"><code>article {
    &amp;#portofentry {
      &gt;div {
        &amp;.container {
          &gt;input {
            &amp;[type="radio"] {
              display: none;
            }
            &amp;[name="login"] {
              &amp;:checked {
                ~div {
                  &amp;.container {
                    &gt;form {
                      &amp;[name="loginForm"] {
                        display: block;
                      }
                      &amp;[name="registerForm"] {
                        display: none;
                      }
                    }
                    &amp;.links {
                      &gt;div {
                        &amp;.login {
                          display: none;
                        }
                        &amp;.register,
                        &amp;.forgot {
                          display: block;
                          margin-top: 0;
                        }
                      }
                    }
                  }
                }
              }
            }
            &amp;[name="register"] {
              &amp;:checked {
                ~div {
                  &amp;.container {
                    &gt;form {
                      &amp;[name="registerForm"] {
                        display: block;
                      }
                      &amp;[name="loginForm"] {
                        display: none;
                      }
                    }
                    &amp;.links {
                      &gt;div {
                        &amp;.register,
                        &amp;.forgot {
                          display: none;
                        }
                        &amp;.login {
                          display: block;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          &gt;div {
            &amp;.container {
              &gt;form {
                display: none;
                &gt;div {
                  &amp;::after {
                    content: '';
                    display: table;
                    clear: both;
                  }
                  &gt;div {
                    &amp;.vDivide {
                      position: absolute;
                      left: 50%;
                      transform: translate(-50%);
                      border: 1px solid $light-grey;
                      height: 17.5rem;
                      @media only screen and (min-width: 120em) {
                        height: 26rem;
                      }
                      @media only screen and (min-width: 135em) {
                        height: 34.17rem;
                      }
                      &gt;span {
                        &amp;.vDivideText {
                          position: absolute;
                          top: 50%;
                          transform: translate(-50%, -50%);
                          background-color: $faint-navy;
                          border: 1px solid $light-grey;
                          border-radius: 50%;
                          padding: .8rem 1rem;
                          color: $off-white;
                          text-transform: uppercase;
                        }
                      }
                    }
                    &amp;.full {
                      &amp;.half {
                        &gt;button,
                        &gt;input {
                          width: calc(100% - 4rem);
                          display: inline-block;
                          margin: 1rem;
                        }
                        &amp;:nth-of-type(3) {
                          &gt;button,
                          &gt;input {
                            margin: 1rem 1rem 1rem 3rem;
                          }
                        }
                      }
                    }
                    &gt;input {
                      &amp;[type="text"],
                      &amp;[type="password"] {
                        margin: 2rem;
                        padding: 1.5rem;
                        width: calc(100% - 4rem);
                      }
                    }
                    &gt;label {
                      color: $grey;
                      margin-left: 3.5rem;
                      font-weight: 300;
                      @media only screen and (min-width: 120em) {
                        font-size: 3rem;
                      }
                      &gt;input {
                        &amp;[type="date"] {
                          padding: 1.5rem;
                          width: auto;
                          background: none;
                          border: none;
                          border-radius: .5rem;
                          border-right: 1px solid $light-grey;
                          border-left: 1px solid $light-grey;
                          text-decoration: none;
                          margin: 0 auto;
                          @media only screen and (min-width: 75em) {
                            font-size: 3rem;
                            font-weight: 300;
                            padding: 1.5rem;
                          }
                          &amp;:hover {
                            box-shadow: 0 0 1rem rgba($faint-navy, .5);
                            background: none;
                          }
                          &amp;:focus {
                            box-shadow: 0 0 1rem rgba($faint-navy, 1);
                            background: none;
                          }
                        }
                      }
                    }
                    &gt;p {
                      text-align: center;
                    }
                    &gt;button {
                      margin: 2rem;
                      width: calc(100% - 4rem);
                    }
                  }
                }
              }
              &amp;.links {
                background: $faint-grey;
                margin: 2rem;
                padding: 1.5rem;
                width: calc(100% - 4rem);
                border-radius: 0 0 .5rem .5rem;
                &gt;div {
                  text-align: center;
                  &gt;label {
                    cursor: pointer;
                  }
                }
              }
            }
          }
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article id="portofentry"&gt;
    &lt;div class="container"&gt;
      &lt;input type="radio" name="login" id="login" checked&gt;
      &lt;input type="radio" name="register" id="register"&gt;
      &lt;div class="container"&gt;
        &lt;form action="/members/admit.php" name="loginForm"&gt;
          &lt;div&gt;
            &lt;h2&gt;Login&lt;/h2&gt;
            &lt;h6&gt;welcome back&lt;/h6&gt;
            &lt;div class="vDivide"&gt;
              &lt;span class="vDivideText"&gt;or&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="full half"&gt;
              &lt;button type="button" class="google"&gt;
         &lt;i class="fab fa-google"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Login with Google
        &lt;/button&gt;
              &lt;button type="button" class="facebook"&gt;
         &lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Login with Facebook
        &lt;/button&gt;
              &lt;button type="button" class="linkedin"&gt;
         &lt;i class="fab fa-linkedin-in"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Login with LinkedIn
        &lt;/button&gt;
              &lt;button type="button" class="twitter"&gt;
         &lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;Login with Twitter
        &lt;/button&gt;
            &lt;/div&gt;
            &lt;div class="full half"&gt;
              &lt;div class="mob"&gt;
                &lt;p&gt;Sign in manually&lt;/p&gt;
              &lt;/div&gt;
              &lt;input type="text" name="username" placeholder="Username" required&gt;
              &lt;input type="password" name="password" placeholder="Password" required&gt;
              &lt;button type="submit" name="loginNow"&gt;Login&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
        &lt;form action="/members/register/" name="registerForm"&gt;
          &lt;div&gt;
            &lt;h2&gt;Register&lt;/h2&gt;
            &lt;h6&gt;welcome&lt;/h6&gt;
            &lt;div&gt;
              &lt;input type="text" name="firstname" placeholder="First Name" required&gt;
              &lt;input type="text" name="lastname" placeholder="Last Name" required&gt;
              &lt;input type="text" name="email" placeholder="Email" required&gt;
              &lt;label for="dob"&gt;Date of Birth:
         &lt;input type="date" name="dob" id="dob" placeholder="Date of Birth" required&gt;
        &lt;/label&gt;
              &lt;input type="password" name="password" placeholder="Password" required&gt;
              &lt;input type="password" name="passwordconfirm" placeholder="Confirm Password" required&gt;
              &lt;p&gt;By creating an account you agree to our &lt;a href="/legal/terms-of-use/"&gt;Terms &amp;amp; Privacy&lt;/a&gt;.&lt;/p&gt;
              &lt;button type="submit" name="registerNow"&gt;Register&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="container links"&gt;
        &lt;div class="full half register"&gt;
          &lt;label for="register"&gt;Register&lt;/label&gt;
        &lt;/div&gt;
        &lt;div class="full half forgot"&gt;
          &lt;a href="#"&gt;Forgot password?&lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="login"&gt;
          Already have an account? &lt;label for="login"&gt;Login&lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Both of the inputs have <code>id</code>s and I know that both of them work because it defaults to one on load and I can click the other to make it appear. I just can't get it to go back to the login screen when clicking on the Login label.</p>
  
  <p>What am I missing or doing wrong here?</p>