Почему конфликтуют между собой кнопки RADIO?

Question

[Антон]

<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>

 label {
    width: 19px;
    height: 19px;
    display: inline-block;
    position: relative;
   }

   input[type="radio"] + span1 {
position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(/upload/black.png) no-repeat;
    cursor: pointer;
   }

 input[type="radio"] + span2 {
position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(/upload/blue.png) no-repeat;
    cursor: pointer;
   }

   input[type="radio"]:checked + span1 {
     position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(/upload/blue.png) no-repeat;
    cursor: pointer; 
   }
  </style>

<script type="text/javascript">
$(document).ready(function (){
	$(':radio').click(function (){
		if (this.checked) {
			$('#test').attr('src',this.value);
		}
	});
});
</script>

<script type="text/javascript">
$(document).ready(function (){
	$(':radio').click(function (){
		if (this.checked) {
			$('#test1').attr('src1',this.value);
		}
	});
});
</script>

<!-- Блок первых кнопок -->

<div class="inthis89">
     <div class="block89"><img id='test' src='/upload/connemarablue.png'/></br>
	<form id='test'>

<label id='test' >
<input type='radio' name='scr' value='/upload/connemarablue.png'/><span1></span>
</label>

<label id='test' >
<input type='radio' name='scr' value='/upload/connemarabrown.png'/><span2></span>
</label>

</form></div>
    
<!-- Блок вторых кнопок -->

 <div class="block89"><img id='test1' src='/upload/connemarabrown.png'/></br>
<form id='test1'>

<label id='test1' >
<input type='radio' name='scr1' value='/upload/connemarablue.png'/><span></span>
</label>

<label id='test1' >
<input type='radio' name='scr1' value='/upload/connemarabrown.png'/><span></span>
</label>

</form></div>
      
<!-- Блок третьих кнопок -->

<div class="block89"><img id='test3' src='/upload/connemarabrown.png'/></br>

<form id='test3'><label>
<input type='radio' name='scr3' value='/upload/connemarabrown.png'/><span></span>
</label>

<label>
<input type='radio' name='scr3' value='/upload/connemarablue.png'/><span></span>
</label>

</form></div>

</div>

Набросал код, тут три однотипных блока. В каждом по радио. Но если нажимаешь во втором блоке радио, то реагирует первый блок, тоже с третьим блоком. Вроде стили проставил... Что тут не так и как правильно?

Comments

[Kovalsky]

ID не могут повторяться, сделайте их уникальными.

[Антон]

Никита Полевой: какие именно?

[Kovalsky]

anton99zel: в вёрстке не может быть повторяющихся ID. Все ID которые повторяются стоит сделать уникальными.

[Антон]

Никита Полевой: я же задал test1, test2......
смотрите код

[Kovalsky]

anton99zel: у вас в коде огромное количество повторяющихся ID, и вижу я это именно из вашего кода. Какой смысл спорить?

Давайте я скажу, какие идентификаторы я вижу, по порядку: test, test, test, test, test1, test1, test1, test1, test3, test3. Три идентификатора, всего 10 вхождений. Это недопустимо.

К тому же не очень понятно что делает ваш код, т.к. он зачем-то первой кнопке с одним из ID добавляет атрибут src. Это так и было задумано?

А ещё не существует тегов span1 и span2.

[kulaeff]

Никита Полевой: Никита Полевой прав, атрибут id в рамках страницы должен быть уникальным. Хотя к вопросу это не имеет отношения.

Answer 1

[Антон]

Все переделал сначала и заработало

<script>
$(document).ready(function(){
    $('input[name=sw]').click(function(){
      var v = ($(this).val());
      console.log(v);
      if(v === 'one'){
          $('#one').show();
          $('#two').hide();
      }
      else{
          $('#one').hide();
          $('#two').show();
      }
    })
})
</script>
<script>
$(document).ready(function(){
    $('input[name=sw2]').click(function(){
      var v = ($(this).val());
      console.log(v);
      if(v === 'one1'){
          $('#one1').show();
          $('#two2').hide();
      }
      else{
          $('#one1').hide();
          $('#two2').show();
      }
    })
})
</script>
<script>
$(document).ready(function(){
    $('input[name=sw3]').click(function(){
      var v = ($(this).val());
      console.log(v);
      if(v === 'one3'){
          $('#one3').show();
          $('#two4').hide();
      }
      else{
          $('#one3').hide();
          $('#two4').show();
      }
    })
})
</script>
<style>
    .none{
        display:none;
    }
</style>





<style>

 label {
    width: 19px;
    height: 19px;
    display: inline-block;
    position: relative;
   }

   input[type="radio"] + .letter1 {
position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(/upload/black.png) no-repeat;
    cursor: pointer;
   }
 input[type="radio"] + .letter2 {
position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(/upload/blue.png) no-repeat;
    cursor: pointer;
   }
   input[type="radio"] + .letter3 {
position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(/upload/black.png) no-repeat;
    cursor: pointer;
   }
 input[type="radio"] + .letter4 {
position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(/upload/blue.png) no-repeat;
    cursor: pointer;
   }

  input[type="radio"] + .letter5 {
position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(/upload/black.png) no-repeat;
    cursor: pointer;
   }
 input[type="radio"] + .letter6 {
position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(/upload/blue.png) no-repeat;
    cursor: pointer;
   }
  </style>



<div class="inthis89">
     <div class="block89"><div id="one"><img src="/upload/connemarabrown.png"/>
</div>
<div id="two" class="none"><img src="/upload/connemarablue.png"/>
</div>
<label><input type="radio" name="sw" value="one" checked><span class="letter2"></span></label>
<label><input type="radio" name="sw" value="two"><span class="letter1"></span></label></div>
     <div class="block89"><div id="one1"><img src="/upload/connemarabrown.png"/>
</div>
<div id="two2" class="none"><img src="/upload/connemarablue.png"/>
</div>
<label><input type="radio" name="sw2" value="one1" checked><span class="letter4"></span></label>
<label><input type="radio" name="sw2" value="two2"><span class="letter3"></span></label></div>
     <div class="block89"><div id="one3"><img src="/upload/connemarabrown.png"/>
</div>
<div id="two4" class="none"><img src="/upload/connemarablue.png"/>
</div>
<label><input type="radio" name="sw3" value="one3" checked><span class="letter6"></span></label>
<label><input type="radio" name="sw3" value="two4"><span class="letter5"></span></label></div>

</div>

Answer 2

[Владимир Яковлев]

точно такой код? у меня работает корректно, не конфликтует.

Comments

[Антон]

попробуй с реальными картинками на сайте

[kulaeff]

Подтверждаю, ваш код работает. Пруф https://jsfiddle.net/0s6bpw0o/.

[Антон]

kulaeff: галочки работают, картинки зато везде меняются

[kulaeff]

anton99zel: о каких картинках вы говорите? Код, который вы привели, работает. В вопросе ничего про картинки нет.

[Антон]

kulaeff: Может поможете составить три блока
в каждом блоке два радио, вызывающие картинку

Как бы три товара, у каждого товара два цвета.
Нужно нажатием радио менять цвет товара
т.е. всего 6 картинок - 2 в каждом блоке.
К тому же каждый радио надо подменить на уникальную картинку