Калькулятор с помощью checkbox

608

08 сентября 2017, 23:36

Здравствуйте,есть задача реализовать следующий калькулятор на чекбоксах

Как видите при нажатии на чекбокс информация того блока в котором находится чекбокс должна дублироваться в форму слева,а внизу должна показываться итоговая сумма, я сумел пока что понять как можно реализовать итоговую сумму следующим кодом :

var total = 0; 
 
function test(item) { 
  if (item.checked) { 
    total += parseInt(item.value); 
    $('.block h3').text() 
  } else { 
    total -= parseInt(item.value); 
  } 
  //alert(total); 
  document.getElementById('Totalcost').innerHTML = total + " /-"; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="container"> 
  <input type="checkbox" name="channelcost" value="10" onClick="test(this);" />10<br /> 
  <input type="checkbox" name="channelcost" value="20" onClick="test(this);" />20 <br /> 
  <input type="checkbox" name="channelcost" value="40" onClick="test(this);" />40 <br /> 
  <div class="block"> 
    <h3>Отвертка</h3><input type="checkbox" name="channelcost" value="60" onClick="test(this);" />60 <br /></div> 
</div> 
Total Amount : <span id="Totalcost"> </span> 
<div class="price"> 
 
</div>

Но к сожалению никак не получается сдублировать инфу с того блока в форму,в котором находится чекбокс. Что подскажите? Заранее благодарю.

Answer 1

Примерный вариант реализации:

var total = 0; 
 
function calcItems(item) { 
  var $leftBlock = $('.left'); 
  var val = $(item).val(); 
  var name = $(item).parent('label').text(); 
  var index = $(item).attr('data-index'); 
 
  if (item.checked) { 
    total += parseInt(val); 
    $leftBlock.append('<span data-index=' + index + '>' + name + '</span>'); 
  } else { 
    total -= parseInt(val); 
    $leftBlock.find('[data-index="' + index + '"]').remove(); 
  } 
 
  $('#result b').text(total); 
 
}

#block>div { 
  width: 50%; 
  float: left; 
  height: 70px; 
} 
 
label { 
  width: 100%; 
  float: left; 
} 
 
.left { 
  background: #ded9d9; 
} 
 
.left span { 
  width: 100%; 
  display: inline-block; 
} 
 
.right { 
  background: #f1f1f1; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="block"> 
  <div class="left"> </div> 
  <div class="right"> 
    <label><input type="checkbox" data-index="1" name="channelcost" value="100" onclick="calcItems(this);" > <span>Опция №1</span> <b>100 руб</b></label> 
    <label><input type="checkbox" data-index="2" name="channelcost" value="200" onclick="calcItems(this);" > <span>Опция №2</span> <b>200 руб</b></label> 
    <label><input type="checkbox" data-index="3" name="channelcost" value="300" onclick="calcItems(this);" > <span>Опция №3</span> <b>300 руб</b></label> 
  </div> 
</div> 
<div id="result"> 
  Total Amount : <b>0</b> руб 
</div>

Answer 2

let channelsList = []; 
const $channels = $('.channels'), 
  $channelsCheckbox = $channels.find('.channels_checkbox'), 
  $channelsLabel = $channels.find('.channels_item'), 
  $total = $('.total'), 
  $totalChannels = $total.find('.total_channels'), 
  $totalSum = $total.find('.total_sum'); 
   
for(let i = 0; i < $channelsLabel.length; i++) { 
  $this = $channelsLabel.eq(i); 
   
  channelsList[i] = { 
    price: parseInt($this.find('.channels_checkbox').val()), 
    info: $this.find('.channels_info').clone() 
  } 
} 
   
$channelsCheckbox.on('change', () => { 
  let sum  = 0; 
   
  $totalChannels.html(''); 
   
  for(let i = 0; i < $channelsCheckbox.length; i++) { 
    if($channelsCheckbox.eq(i).prop('checked')) { 
      sum += channelsList[i].price; 
      $totalChannels.append(channelsList[i].info) 
    } 
  } 
   
  $totalSum.html(sum); 
});

.total { 
  background-color: #f1f5f9; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="total"> 
  <div class="total_channels"> 
     
  </div> 
  <p class="total_sum"></p> 
</div> 
<div class="channels"> 
  <label class="channels_item"> 
    <input type="checkbox" class="channels_checkbox" value="10"> 
    <div class="channels_info"> 
      Клубничка 
    </div> 
  </label> 
  <label class="channels_item"> 
    <input type="checkbox" class="channels_checkbox" value="30"> 
    <div class="channels_info"> 
      Клубничка 2 
    </div> 
  </label> 
  <label class="channels_item"> 
    <input type="checkbox" class="channels_checkbox" value="50"> 
    <div class="channels_info"> 
      Клубничка 3 
    </div> 
  </label> 
</div>

Answer 3

var total = 0; 
 
 
function test(item) { 
  if (item.checked) { 
    total += parseInt(item.value); 
  } else { 
    total -= parseInt(item.value); 
  } 
  $('#Totalcost').text(total + ' /-'); 
 
  $('.price').html(''); // очищаем список выбранных товаров 
  $('.block').each(function() { // перебираем все .block 
    if ($(this).find('input').is(':checked')) { // если чекбокс отмечен 
      $('.price').append($(this).find('h3').text() + '<br />'); // добавляем текст из h3 в .price 
    } 
  }); 
}

.block { 
  float: left; 
  width: 50%; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="container"> 
  <div class="block"> 
    <h3>Отвертка</h3><input type="checkbox" name="channelcost" value="60" onClick="test(this);" />60 <br /> 
  </div> 
  <div class="block"> 
    <h3>Молоток</h3><input type="checkbox" name="channelcost" value="50" onClick="test(this);" />50 <br /> 
  </div> 
  <div class="block"> 
    <h3>Шуруповерт</h3><input type="checkbox" name="channelcost" value="40" onClick="test(this);" />40 <br /> 
  </div> 
  <div class="block"> 
    <h3>Стамеска</h3><input type="checkbox" name="channelcost" value="30" onClick="test(this);" />30 <br /> 
  </div> 
</div> 
<div style="clear:both"></div> 
<br /><br />Total Amount : <span id="Totalcost"> </span> 
<div class="price"> 
 
</div>