Переключение стилей

function openButton(buttonName, elmnt, color) { 
  // Hide all elements with class="tabcontent" by default */ 
  var i, tabcontent, tablinks; 
  tabcontent = document.getElementsByClassName("create_form"); 
  for (i = 0; i < tabcontent.length; i++) { 
    tabcontent[i].style.display = "none"; 
  } 
 
  // Remove the background color of all tablinks/buttons 
  //tablinks = document.getElementsByClassName("tablink"); 
  /******************************************************** 
  for (i = 0; i < tablinks.length; i++) { 
    tablinks[i].style.backgroundColor = ""; 
    tablinks[i].style.color = ""; 
    //tablinks[i].input[type = "checkbox"] + label.style.border - radius = ""; 
  } 
  
**********************************************************/ 
  //---------------------------------------------------------------- 
  // Измененный отрывок кода 
  tablinks = document.querySelectorAll('.tablink') 
  tablinks.forEach(function(tab) { 
    tab.style.backgroundColor = ""; 
    tab.style.color = ""; 
    //tablinks[i].input[type = "checkbox"] + label.style.border - radius = ""; 
    //---------------------------------------------------------------- 
    // Вот так это должно выглядить, если вы ищите элементы внутри tablink 
    tab.querySelector('input[type="checkbox"]').style.border = '' 
    tab.querySelector('label').style.border = '' 
    //---------------------------------------------------------------- 
 
  }) 
  // Show the specific tab content 
  //document.getElementById(buttonName).style.display = "block"; 
 
  // Add the specific color to the button used to open the tab content 
  //elmnt.style.backgroundColor = color; 
  //elmnt.style.color = '#fff'; 
 
} 
// Get the element with id="defaultOpen" and click on it 
document.getElementById("defaultOpen").click();

.tablink { 
  width: 10.3125vw; 
  height: 3.75vw; 
  display: inline-block; 
  background-color: #fff; 
  color: #170738; 
  border: none; 
  outline: none; 
  cursor: pointer; 
  font-size: 1vw; 
  text-align: right; 
  font-family: 'Ubuntu Bold', arial; 
  font-weight: bold; 
  margin-left: .2vw; 
  padding: 1.25vw 1.25vw 0 0; 
  position: relative; 
} 
 
input[type="checkbox"] { 
  display: none; 
} 
 
.tablink input[type="checkbox"]+label { 
  display: inline-block; 
  position: absolute; 
  top: 1vw; 
  left: 3vw; 
  cursor: pointer; 
  width: 1.5625vw; 
  height: 1.5625vw; 
  border: 0.125vw #815eca solid; 
  border-radius: 1vw; 
} 
 
.tablink input[type="checkbox"]+label::before { 
  content: ""; 
  display: inline-block; 
  height: 1vw; 
  width: 1vw; 
  margin: 0 0.05vw 0 0; 
  background-image: url('img/check_purple.png'); 
  background-repeat: no-repeat; 
  position: relative; 
  left: 0; 
  top: 0.3vw; 
} 
 
.tablink input[type="checkbox"]:checked+label::before { 
  background-position: -0.9vw 0; 
}

<div class="tablink" onclick="openButton('form_telega', this, '#683ec0')" id="defaultOpen">Telegram 
  <input id="cfirst" type="checkbox" checkbox hidden> 
  <label for="cfirst"></label> 
</div> 
<div class="tablink" onclick="openButton('form_twitter', this, '#683ec0')">Twitter 
  <input id="csecond" type="checkbox" checkbox hidden> 
  <label for="csecond" style="left: 4vw;"></label> 
</div> 
<div class="tablink" onclick="openButton('form_facebook', this, '#683ec0')">Facebook 
  <input id="cthree" type="checkbox" checkbox hidden> 
  <label for="cthree" style="left: 2.5vw;"></label> 
</div>

(function() { 
  var els = document.querySelectorAll('.tablink'); 
  [].forEach.call(els, function(el) { 
    el.addEventListener('click', function() { 
      document.querySelector('.tablink.selected').classList.remove('selected'); 
      this.classList.add('selected'); 
    }); 
  }); 
})();

.tablink { 
  width: 10.3125vw; 
  height: 3.75vw; 
  display: inline-block; 
  background-color: #fff; 
  color: #170738; 
  border: none; 
  outline: none; 
  cursor: pointer; 
  font-size: 1vw; 
  text-align: right; 
  font-family: 'Ubuntu Bold', arial; 
  font-weight: bold; 
  margin-left: .2vw; 
  padding: 1.25vw 1.25vw 0 0; 
  position: relative; 
} 
 
input[type="checkbox"] { 
  display: none; 
} 
 
.tablink input[type="checkbox"]+label { 
  display: inline-block; 
  position: absolute; 
  top: 1vw; 
  left: 3vw; 
  cursor: pointer; 
  width: 1.5625vw; 
  height: 1.5625vw; 
  border: 0.125vw #815eca solid; 
  border-radius: 1vw; 
} 
 
.tablink input[type="checkbox"]+label::before { 
  content: ""; 
  display: inline-block; 
  height: 1vw; 
  width: 1vw; 
  margin: 0 0.05vw 0 0; 
  background-image: url('img/check_purple.png'); 
  background-repeat: no-repeat; 
  position: relative; 
  left: 0; 
  top: 0.3vw; 
} 
 
.tablink input[type="checkbox"]:checked+label::before { 
  background-position: -0.9vw 0; 
} 
 
.selected { 
  background-color: #683ec0; 
  color: #fff; 
}

<div class="tablink selected">Telegram 
  <input id="cfirst" type="checkbox"> 
  <label for="cfirst"></label> 
</div> 
<div class="tablink">Twitter 
  <input id="csecond" type="checkbox"> 
  <label for="csecond" style="left: 4vw;"></label> 
</div> 
<div class="tablink">Facebook 
  <input id="cthree" type="checkbox"> 
  <label for="cthree" style="left: 2.5vw;"></label> 
</div>