check box highlight text area css

i just wanted to be able to highlight a text field if a certain check box was checked on a form

in this demo below, if you click on the check1 checkbox it will give you an alert saying if the box is checked or not

changed to a console log if the box is checked, now if you check or uncheck the box it will add a border to the text input

check1 is using the raw version of this code and check2 is using the function version of the 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
    }
};
  
}




Other Items in javascript

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 48 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

âĪðŸ‘Đ‍ðŸ’ŧðŸ•đ

Random Quote
time you enjoyed wasting is not wasted time
Unknown