rasetty

При такой разметке на CSS никак.

Вариант без JS:

<input type="checkbox" id="ch">
<div>
<span id="sp" class="sp">TEST</span> 
<label for="ch">тут стилизованный чекбокс</label>  

</div>

#ch:checked + div .sp {}

Суть в том, что вы скрываете сам инпут. Делать это нужно используя CSS паттерн visually-hidden (вариантов несколько, легко гуглятся) для того, чтобы осталась функциональность для доступности.
А стилизуется лейбл или его псевдоэлемент.
Клик происходит по лейблу, но инпут переключается, потому что они связаны. Находится при этом лейбл может где угодно.
Нюанс один: при клике на лейбл, браузер прокручивает страницу к тому месту, где находится инпут. Так что аккуратно, если они совсем в разных местах.

Путаете id элемента и сам элемент.

HTML:
<div id="my-div">Привет!</div>

JS:

var id = "my-div"; // это id
var el = document.getElementById(id); // элемент
el.getBoundingClientRect() // должно работать

Вызов функции в атрибуте элемента - плохая практика. Намного изящнее добавить eventListener

var elements = document.querySelectorAll('.click');
for ( var index = 0; index < elements.length; index++ ) {
	elements[index].addEventListener( 'click', function() {
		var id = this.id;
		console.log( id );
	} )
}

// Получение IP-адреса
$ip = !empty($_SERVER['HTTP_CF_CONNECTING_IP']) ? $_SERVER['HTTP_CF_CONNECTING_IP'] : $_SERVER['REMOTE_ADDR'];
// Передача в JS
echo "<script>var ip = $ip;</script>";