How to change button with toggle switch-CodePudding

I am building a website and am having a little issue with toggle switches.
I want to display different buttons with toggle switch.
I've built my toggle button but I think there is a problem with the function for switching content.
When I switch on level 2, the result changes, but when I switch on level 1, nothing changes.
Please tell, where is the problem with this code?

$(document).ready(function(){
        $('input:radio').change(function(){
            if($('input[name="graduate"]:checked').is(":checked")){
                $('.ug').hide();
                $('.phd').show();
            }else{
                $('.ug').show();
                $('.phd').hide();
            }
        });
    });

.btn-price:before {
    content: "\f07a";
    display: block;
    width: 20px;
    height: 20px;
    float: right;
    margin: 0 0 0 6px;
    font-family: 'Font Awesome 5 Pro';
}
.btn-price {
  display: table;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1.1em;
  margin: 15px auto;
  border-radius: 50px;
  color: #f4f4f4 !important;
  transition: all 0.3s ease 0s;
}
.btn-color-1 {
  background-color: #5DADE2;
}
.switcher {
  display: inline-block;
  height: 40px;
  margin-top:17px;
  padding: 4px;
  background: #fff;
  border-radius: 2px;
  width: 210px;
  border-radius: 30px;
  border: solid 1px #ddd;
  position: relative;
}

.switcher__input {
  display: none;
}

.switcher__label {
  float: left;
  width: 50%;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  position: inherit;
  z-index: 10;
  transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
  font-weight: unset;
}

.switcher__toggle {
  position: absolute;
  float: left;
  height: 30px;
  width: 50%;
  font-size: 12px;
  line-height: 30px;
  cursor: pointer;
  background-color: #3366cc;
  border-radius: 30px;
  left: 5px;
  top: 4px;
  transition: left 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
}

.switcher__input:checked   .switcher__label {
  color: #fff;
}

.switcher__input--yang:checked ~ .switcher__toggle {
  left: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div >
   <div>
    <div>
      <a href="#1" >BTN 1</a>
    </div>
   </div>     
</div>
    
<div  style="display: none" >  
   <div>
    <div>
      <a href="#2" >BTN 2</a>
    </div>
   </div>
</div>

<div >
    <div >
      <input type="radio" name="graduate" value="yin" id="yin" >
      <label for="yin" >Level 2</label>
      
      <input type="radio" name="graduate" value="yang" id="yang"  checked="">
      <label for="yang" >Level 1</label>
      
      <span ></span>
    </div>
</div>

CodePudding user response：

You are checking checked or not of the radio button using name attribute so once you select any radio button it will remain true every time you click and that's why it's always showing button2 in label

Here is updated code

$(document).ready(function(){
        $('input:radio').change(function(){
            if($('input[name="graduate"]:checked').val() == "yin"){
                $('.ug').hide();
                $('.phd').show();
            }else{
                $('.ug').show();
                $('.phd').hide();
            }
        });
    });

.btn-price:before {
    content: "\f07a";
    display: block;
    width: 20px;
    height: 20px;
    float: right;
    margin: 0 0 0 6px;
    font-family: 'Font Awesome 5 Pro';
}
.btn-price {
  display: table;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1.1em;
  margin: 15px auto;
  border-radius: 50px;
  color: #f4f4f4 !important;
  transition: all 0.3s ease 0s;
}
.btn-color-1 {
  background-color: #5DADE2;
}
.switcher {
  display: inline-block;
  height: 40px;
  margin-top:17px;
  padding: 4px;
  background: #fff;
  border-radius: 2px;
  width: 210px;
  border-radius: 30px;
  border: solid 1px #ddd;
  position: relative;
}

.switcher__input {
  display: none;
}

.switcher__label {
  float: left;
  width: 50%;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  position: inherit;
  z-index: 10;
  transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
  font-weight: unset;
}

.switcher__toggle {
  position: absolute;
  float: left;
  height: 30px;
  width: 50%;
  font-size: 12px;
  line-height: 30px;
  cursor: pointer;
  background-color: #3366cc;
  border-radius: 30px;
  left: 5px;
  top: 4px;
  transition: left 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
  will-change: transform;
}

.switcher__input:checked   .switcher__label {
  color: #fff;
}

.switcher__input--yang:checked ~ .switcher__toggle {
  left: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<div >
   <div>
    <div>
      <a href="#1" >BTN 1</a>
    </div>
   </div>     
</div>
    
<div  style="display: none" >  
   <div>
    <div>
      <a href="#2" >BTN 2</a>
    </div>
   </div>
</div>

<div >
    <div >
      <input type="radio" name="graduate" value="yin" id="yin" >
      <label for="yin" >Level 2</label>
      
      <input type="radio" name="graduate" value="yang" id="yang"  checked="">
      <label for="yang" >Level 1</label>
      
      <span ></span>
    </div>
</div>