подключить input checkbox + radio в одну функцию

248

30 марта 2018, 11:58

на странице есть радиокнопка и чекбокс-при нажатии они должны вывести 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');
  }

Answer 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');
    } 
});

Answer 2

$(".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>

Answer 3

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

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>