JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bx-filter-parameters-box-container">
	<div class="checkbox">
		<label data-role="label_arrFilter_46_471508825" class="bx-filter-param-label " for="arrFilter_46_471508825">
			<span class="bx-filter-input-checkbox">
				<input type="checkbox" value="Y" name="arrFilter_46_471508825" id="arrFilter_46_471508825" onclick="smartFilter.click(this)">
					<span class="bx-filter-param-text" title="ДЛЯ ЖЕНЩИН">ДЛЯ ЖЕНЩИН&nbsp;(<span data-role="count_arrFilter_46_471508825">6</span>)</span>
			</span>
		</label>
	</div>
<div class="checkbox">
   <label data-role="label_arrFilter_46_231625436" class="bx-filter-param-label " for="arrFilter_46_231625436">
	<span class="bx-filter-input-checkbox">
		<input type="checkbox" value="Y" name="arrFilter_46_231625436" id="arrFilter_46_231625436" onclick="smartFilter.click(this)">
				<span class="bx-filter-param-text" title="ДЛЯ МУЖЧИН">ДЛЯ МУЖЧИН&nbsp;(<span data-role="count_arrFilter_46_231625436">1</span>)</span>
	 </span>
	  </label>
 </div>
</div>

CSS

.bx-filter-parameters-box-container .checkbox:first-child {
    margin-top: 0;
}
.radio, .checkbox {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}
.radio label, .checkbox label {
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}
body .bx-filter-input-checkbox {
    font-family: 'Roboto-Regular';
    font-size: 11px;
    text-transform: uppercase;
}
body .bx-filter-input-checkbox {
    width: 17px;
    height: 17px;
    display: inline-block;
    cursor: pointer;
    background: url(http://test.gold-999.ru/bitrix/templates/eshop_bootstrap_blue/images/checkbox.png) no-repeat;
    padding-left: 25px;
}
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-top: 4px \9;
    margin-left: -20px;
}
body .bx-filter-input-checkbox input, body .bx-filter-title {
    display: none;
}
input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    margin-top: 1px \9;
    line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}
input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.bx-filter .bx-filter-input-checkbox .bx-filter-param-text {
    display: block;
    text-align: left;
}
button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

JavaScript

jQuery(document).ready(function(){

jQuery(".bx-filter-input-checkbox").mousedown(
/* при клике на чекбоксе меняем его вид и значение */
function() {

     changeCheck(jQuery(this));
     
     
});


jQuery(".bx-filter-input-checkbox").each(
/* при загрузке страницы нужно проверить какое значение имеет чекбокс и в соответствии с ним выставить вид */
function() {
     
     changeCheckStart(jQuery(this));
     
});

                                        });

function changeCheck(el)
/* 
	функция смены вида и значения чекбокса
	el - span контейнер дял обычного чекбокса
	input - чекбокс
*/
{
     var el = el,input = el.find("input").eq(0);

   	 if(!input.attr("checked")) {

  		el.css("background-position","0 -19px");	
		 //input.attr("checked", true)
		
	} else {
		
		el.css("background-position","0 0");	
		//input.attr("checked", false)

		}
  	
     return true;
}


	function changeCheckStart(el)
/* 
	если установлен атрибут checked, меняем вид чекбокса
*/
	{
	var el = el,
		input = el.find("input").eq(0);
      if(input.attr("checked")) {
		el.css("background-position","0 -17px");	
		}

     return true;
}