Переключение между checkbox

227

04 апреля 2018, 09:08

Есть много чекбоксов независимых друг от друга. И есть 2 чекбокса: id="Bort" и id="Borta" которые работают по принципу радиобаттонов, при этом можно не выбрать ни одного чекбокса из этой пары.

Также есть два радиобаттона id="radio" и id="radio2".

Итого получается шесть возможных комбинации по выбору чекбоксов и радиобаттонов

не выбран ни один чекбокс, выбран первый радиобаттон
не выбран ни один чекбокс, выбран второй радиобаттон
выбран первый чекбокс, выбран первый радиобаттон
выбран первый чекбокс, выбран второй радиобаттон
выбран второй чекбокс, выбран первый радиобаттон
выбран второй чекбокс, выбран второй радиобаттон

Каждой этой комбинации соответствует своя картинка

<input type="checkbox" class="radio" name="Борт"  id="Bort">Борт у стены
<input type="checkbox"  class="radio" name="Борта"  id="Borta" >Борта у стены
<input class="kartinki" name="гор планки" type="checkbox" onchange="calc()" id="Gor_planki" />гор планки
<br>
<input class="kartinki" name="Лестница" type="radio" id="radio" value="слева" checked="checked" />
слева
<input class="kartinki" type="radio" name="Лестница" id="radio2" value="справа" />справа
<br>
<img src="http://ecoskarb.ru/products/matrasy/img/krovat-cherdak-s-rabochej-zonoj_i_stolom_527.jpg" id="image" width="310" height="280" />

Вопрос: как реализовать работу чекбоксов в режиме радиобаттонов и при этом обеспечить смену картинок?

Накидала код, не совсем то что мне нужно получилось, Борт и Борта должны переключаться между собой:

    $('input').on("click",function(){
if($('#Bort').prop('checked') && $('#radio').prop('checked')) { 
    $('#Borta').prop('checked', false);//пытаюсь отключить Борта
 $('#image').attr('src','http://ecoskarb.ru/products/matrasy/img/krovat-cherdak-s-rabochej-zonoj_527_2.jpg');//бортa,леваяЛестница
  } 
  else if($('#Bort').prop('checked') && $('#radio2').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/matrasy/img/ecoskarb.ru_bed_attic_860.jpg');//бортa,праваяЛестница
  } 
  else if($('#Borta').prop('checked') && $('#radio').prop('checked')) { 
   $('#Bort').prop('checked', false); //пытаюсь отключить Борт  
  $('#image').attr('src','http://ecoskarb.ru/products/matrasy/img/krovat_cherdachok_750.jpg');//бортa,леваяЛестница
  } 
  else if($('#Borta').prop('checked') && $('#radio2').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/matrasy/img/krovat_cherdak_527.jpg');//бортa,праваяЛестница
  } 
   else if($('#Gor_planki').prop('checked') && $('#radio').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/matrasy/img/bed_attic_2.jpg');//горПланки,леваяЛестница
  } 
  else if($('#Gor_planki').prop('checked') && $('#radio2').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/matrasy/img/bed_attic_2.jpg');//горПланки,праваяЛестница
  } 
  })

Подскажите, пожалуйста как сделать переключение чекбоксов. Нужно именно через id.

Полный код: введите сюда описание ссылки

Answer 1

jQuery(function($) { 
  // Цепляем обработчик на все нужные элементы 
  $('.radio').change(function() { 
    // У всех элементов, кроме кликнутого, снимаем пометку 
    $('.radio').not(this).prop({checked: false}); 
  }); 
});

label { 
  display: block; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<label> 
  Борт 
  <input type="checkbox" class="kartinki radio" name="Борт" id="Bort"> 
</label> 
<label> 
  Борта 
  <input type="checkbox" class="kartinki radio" name="Борта" id="Borta"> 
</label> 
<label> 
  Что-то еще 
  <input type="checkbox" class="kartinki" name="Other" id="Other"> 
</label>

Answer 2

Думаю будет понятно, дальше доработаете под свои нужды.

$('#Bort').change(function() { 
  if ($(this).prop('checked')) { 
    if ($('#Borta').prop('checked')) { 
      $('#Borta').prop('checked', false); 
    } 
 
    if ($('#radio').prop('checked')) { 
      $('#image').attr('src', 'http://ecoskarb.ru/products/matrasy/img/krovat-cherdak-s-rabochej-zonoj_527_2.jpg'); 
    } else if ($('#radio2').prop('checked')) { 
      $('#image').attr('src', 'http://ecoskarb.ru/products/matrasy/img/ecoskarb.ru_bed_attic_860.jpg'); 
    } 
  } 
}); 
 
 
$('#Borta').change(function() { 
  if ($(this).prop('checked')) { 
    if ($('#Bort').prop('checked')) { 
      $('#Bort').prop('checked', false); 
    } 
 
    if ($('#radio').prop('checked')) { 
      $('#image').attr('src', 'http://ecoskarb.ru/products/matrasy/img/krovat_cherdachok_750.jpg'); 
    } else if ($('#radio2').prop('checked')) { 
      $('#image').attr('src', 'http://ecoskarb.ru/products/matrasy/img/krovat_cherdak_527.jpg'); 
    } 
  } 
});

<input type="checkbox" class="radio" name="Борт" id="Bort">Борт у стены 
<input type="checkbox" class="radio" name="Борта" id="Borta">Борта у стены 
<input class="kartinki" name="гор планки" type="checkbox" onchange="calc()" id="Gor_planki" />гор планки 
<br> 
<input class="kartinki" name="Лестница" type="radio" id="radio" value="слева" checked="checked" /> слева 
<input class="kartinki" type="radio" name="Лестница" id="radio2" value="справа" />справа 
<br> 
 
<img src="http://ecoskarb.ru/products/matrasy/img/krovat-cherdak-s-rabochej-zonoj_i_stolom_527.jpg" id="image" width="310" height="280" /> 
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как получить value из массива

На выходе получаю массив в формате:

250

PHP

Добавить теги в строку

ЗдравствуйтеЕсть строка такого вида

230

PHP

Не выполняется PHP на странице

На Perl использую модуль HTML::Template; Выводом странички соответственно занимается Perl-скрипт, большие куски HTML_кода вытягивая из шаблоновПосле...

209

PHP

Получить url с флагом в Laravel

Всем приветСтолкнулся с задачей, в которой нужно получить полную строку get с флагом

227