Спасибо!!! Помогло) :thanks:

А еще вопрос. Если делать то же самое с инпутами, то срабатывает почему-то через один

$('#dveri').on('change', 'input', function(event) { event.preventDefault();
			      $('.konf3d').find('div.dv div.image').removeClass('active').eq($(this).index()).addClass('active');
	});

Что не так?

Так и не разобралась никак((( Может кто-то всетаки подскажет?
HTML:

<div class="dv">
      <div class="image"><img src="/netcat_files/multifile/2694/1_b.png"></div><div class="image active"><img src="/netcat_files/multifile/2694/2_b.png"></div><div class="image"><img src="/netcat_files/multifile/2694/3_b.png"></div><div class="image"><img src="/netcat_files/multifile/2694/4_b.png"></div>      </div>

<div class="radio" id="dveri"><h4 class="widget-title2">Двери</h4>
            <input type="radio" name="gender4" value="Распашная двухстворчатая" id="d1"><label class="ob" for="d1">Распашная двухстворчатая</label><input type="radio" name="gender4" value="Распашная одностворчатая" id="d2"><label class="ob" for="d2">Распашная одностворчатая</label><input type="radio" name="gender4" value="Раздвижная двухстворчатая" id="d3"><label class="ob" for="d3">Раздвижная двухстворчатая</label><input type="radio" name="gender4" value="Раздвижная одностворчатая" id="d4"><label class="ob" for="d4">Раздвижная одностворчатая</label>      
          </div>

JQuery:

$('input[name*=gender4]').change(function () {
                  $('.dv').find('.image').removeClass('active').eq($(this).index()).addClass('active');
    });

Событие происходит только при нажатии на два из инпунтов, другие два никак не реагируют, что я только не испробовала :-E

Heny,
надо упростить алгоритм ... иначе врятли кто подскажет

:( как?

счас код такой:

<script>
(function($) {

$(function() {
	$('ul.btn').on('click', 'li:not(.active)', function(event) {
	  event.preventDefault();
			$('.3d').find('div.variant div.el').removeClass('active').eq($(this).index()).addClass('active');
	});

});

$(function() {

$( "div.radio" ).on( "click", function() {


    if($('#pol1').is(":checked")) {
			      $('#pol').find('div.panel2').removeClass('el1');
			      $('#pol').find('div.panel22').addClass('el1');
                  $('ul.color2').off().on('click', 'li', function(event) {  event.preventDefault();
			        $('.konf3d').find('div.pl div.image').removeClass('active').eq($(this).index()).addClass('active');
			        $('.konf3d').find('div.pn div.image').removeClass('active');
                  });
	}
    else if($('#pol2').is(":checked")) {
			      $('#pol').find('div.panel22').removeClass('el1');
			      $('#pol').find('div.panel2').addClass('el1');
                  $('ul.color3').off().on('click', 'li', function(event) {  event.preventDefault();
			        $('.konf3d').find('div.pn div.image').removeClass('active').eq($(this).index()).addClass('active');
			        $('.konf3d').find('div.pl div.image').removeClass('active');
                  });
	};
	if($("#s1").is(":checked")) {
		  $('ul.color').off().on('click', 'li', function(event) {  event.preventDefault();
			      $('.3d').find('div.sm-v div.image').removeClass('active').eq($(this).index()).addClass('active');
			      $('.3d').find('div.sp-v div.image').removeClass('active');
		  });
	}
	else if ($("#s2:checked, #s3:checked").length) {
		  $('ul.color').off().on('click', 'li', function(event) {    event.preventDefault();
			      $('.3d').find('div.sp-v div.image').removeClass('active').eq($(this).index()).addClass('active');
			      $('.3d').find('div.sm-v div.image').removeClass('active');

		  });
	};
	
    if($("#pot1").is(":checked")) {
			      $('.konf3d').find('div.pbt div.image').removeClass('active');
			      $('.konf3d').find('div.pt div.image').addClass('active');
	}
    else if($('#pot2').is(":checked")) {
			      $('.konf3d').find('div.pt div.image').removeClass('active');
			      $('.konf3d').find('div.pbt div.image').addClass('active');
     }; 
    
}); 
    
    $('ul.color4').on('click', 'li', function(event) {  event.preventDefault();
			      $('.3d').find('div.plin div.image').removeClass('active').eq($(this).index()).addClass('active');
	}); 
    $('input[name*=gender4]').change(function () {
                  $('.3d').find('div.dv div.image').removeClass('active').eq($(this).index()).addClass('active');
    });
    
    

});
})(jQuery);

</script>

и не работает этот кусок:

$('input[name*=gender4]').change(function () {
                  $('.3d').find('div.dv div.image').removeClass('active').eq($(this).index()).addClass('active');
    });

меняю значит

$('input[name*=gender4]').change(function () {
                  $('.3d').find('div.dv div.image').removeClass('active').eq($(this).index()).addClass('active');
    });

на

$('input[name*=gender4]').change(function () {
                  $('.3d').find('div.dv div.image').removeClass('active').eq($(this).index()).addClass('active');
    });

ну соответственно инпуты в html изменила на списки, и все заработало.
А мне надо, чтоб работали именно радио-кнопки :cray: