0

на странице есть радиокнопка и чекбокс-при нажатии они должны вывести 1 общую картинку, можно ли их соединить в 1 функцию пробовала так писать,но не работает $('input[type="checkbox", type="radio"]').click(function(){...

html:

<input name="Лестница" type="radio" id="radio" value="слева" checked="checked" /> слева
<input name="Борт" type="checkbox" id="Bort" /> Борт у стены

jquery:

 $('input[type="checkbox"]').click(function(){
  if($('#Bort').prop('checked') && $('#radio').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/matrasy/img/bed_attic_2.jpg');
  } 

3 ответа 3

1

Вот работающий ответ:

$('input').on("click",function(){
    if($('#Bort').prop('checked') && $('#radio').prop('checked')) { 
      $('#image').attr('src','http://ecoskarb.ru/products/matrasy/img/bed_attic_2.jpg');
    } 
});
3
  • 1
    Спасибо,работает!
    – Лиана
    28 мар 2018 в 10:28
  • Не за что. Только учтите, что этот метод запускается по клику на любой input. В идеале, нужным инпутам надо дать один класс и изменить $('input').on("click",function()... на $('input.имя_класса').on("click",function()... 28 мар 2018 в 10:31
  • хорошо,благодарю!
    – Лиана
    28 мар 2018 в 10:33
1

$(".tog").eq(0).on("change", function(){
  $(".image1").toggle(600);
    if ($(".tog").eq(0).is(":checked") && $(".tog").eq(1).is(":checked"))
  {
      $(".image3").toggle(600);

  }
});
$(".tog").eq(1).on("change", function(){
  $(".image2").toggle(600);
  if ($(".tog").eq(0).is(":checked") && $(".tog").eq(1).is(":checked"))
  {
      $(".image3").toggle(600);

  }
});
body
{
font-family: sans-serif;
}
.image
{
  display: none;
background-color: #FFDD00;
  width: 200px;
  height: 100px;
  border:1px solid #C3A900;
  color:#7E6D00;
  box-sizing: border-box;
  line-height:100px;
  padding:0 70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
  <label>
    Радиокнопка
    <input type="radio" value="Радиокнопка" class="tog">
  </label>
  <label>
    Чекбокс
    <input type="checkbox" value="Чекбокс" class="tog">    
  </label>
  <div class="image image1">
    200x100
  </div>
    <div class="image image2">
    200x100
  </div>
    <div class="image image3">
    200x100
  </div>

0

Задайте им просто один общий класс.

function checkProp(el) {
  if (el.prop('checked') === true) {
    $('.image').show(300);
    return;
  }
  
  $('.image').hide(300);
}

checkProp($('.openImage')); // Проверяем при загрузке

$('.openImage').on('change', function() {
  checkProp($(this)); // Раскрываем при изменении
});
.image {
  display: none;
  width: 100px;
  height: 100px;
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="openImage" name="Лестница" type="radio" id="radio" value="слева" /> слева
<input class="openImage" name="Борт" type="checkbox" id="Bort" /> Борт у стены

<div class="image"></div>

1
  • когда выбрана радиокнопка должна появляться 1 картинка,при нажатии на чекбокс 2 картинка ,когда вместе нажаты-3 картинка
    – Лиана
    28 мар 2018 в 10:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.