Задать вопрос
@anton99zel
29а класс средней школы №7
javascript

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

<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>


Набросал код, тут три однотипных блока. В каждом по радио. Но если нажимаешь во втором блоке радио, то реагирует первый блок, тоже с третьим блоком. Вроде стили проставил... Что тут не так и как правильно?
  • Вопрос задан
  • 209 просмотров
6 комментариев
Подписаться 1 Оценить 6 комментариев
Решение пользователя Антон К ответам на вопрос (2)
@anton99zel Автор вопроса
29а класс средней школы №7
Все переделал сначала и заработало
<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>
Ответ написан
Комментировать
Комментировать