check box highlight text area css

check box highlight text area css Demo

View Demo Full Screen View Demo New Tab

check box highlight text area css Code

HTML

<input type="checkbox" id="check1"><br>
<input type="checkbox" id="check2"><br>

<input type="text" id="text1"><br>
<input type="text" id="text2"><br>

CSS

.active-text {
  border:3px solid green;
}

Javascript

document.addEventListener("DOMContentLoaded", function(event) { 
  // add dom loaded stuff

// check if the element is checked
var check1 = document.querySelector('#check1');
var text1 = document.querySelector('#text1');

// add an onclick to check1
check1.onclick = function(){
	if(check1.checked) {
    	console.log('checked');
      	text1.setAttribute( 'class', 'active-text' ); // add the class
    } else {
    	console.log('Not checked');      
      	text1.setAttribute( 'class', '' ); // remove the class
    }
};
  
check_box("#check2","#text2");

});

// now create a function to re-use this on multiple elements
// usage - check_box(check_target,highlight_target)
// function check_box("#check2","#text2") {
function check_box(check_target,highlight_target) {
// check if the element is checked
var check1 = document.querySelector(check_target);
var text1 = document.querySelector(highlight_target);
	
  // check that check1 is set otherwise it crashes the js on the page
if (typeof check1 === 'undefined' || check1 === null) {
	return;
}  
  
// add an onclick to check1
check1.onclick = function(){
	if(check1.checked) {
    	console.log('checked');
      	text1.setAttribute( 'class', 'active-text' ); // add the class
    } else {
    	console.log('Not checked');      
      	text1.setAttribute( 'class', '' ); // remove the class
    }
};
  
}