Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 05.04.2020, 18:05
Интересующийся
Отправить личное сообщение для AaronWolfsberg Посмотреть профиль Найти все сообщения от AaronWolfsberg
 
Регистрация: 04.04.2020
Сообщений: 11

Вот так выглядит HTML часть

<div>
<label>250г <input type="radio" onclick="Calculator.onSelect(1, 170, this);clickRadio(this)" name="radio" value="170" /></label>

<label>1000г <input type="radio"
onclick="Calculator.onSelect(2, 680, this);clickRadio(this)" name="radio" value="680" /> </label>


<div class="formInputBlock">
<br />
<b> <span id="r" name="sum">0</span> грн.
<div>
Ответить с цитированием
  #12 (permalink)  
Старый 05.04.2020, 18:13
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 449

У вас в html полно ошибок.
А радиокнопки - это переключатель, где можно выбрать один вариант. В этом их предназначение. Только один.
Ответить с цитированием
  #13 (permalink)  
Старый 05.04.2020, 18:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,608

сумма checkbox
AaronWolfsberg,
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
addEventListener( "DOMContentLoaded" , function() {
function showTotal()
{
var total = Array.prototype.reduce.call(document.querySelectorAll(".sum:checked"),
function(sum, elem) {
return sum + +elem.value
}, 0);
document.querySelector("output").innerHTML = total.toFixed(2)
}
function clickRadio(event)
{ //зачем  radio работать как checkbox, одному вам известно
var target = event.target;
if(target.closest(".sum[type='radio']")) {
var check = target.classList.contains("check");
target.classList.toggle("check");
target.checked = !check;
showTotal();
}
}

document.querySelector("form").addEventListener("change", showTotal)
document.querySelector("form").addEventListener("click", clickRadio)


  });
  </script>
</head>
<body>
<form action="http://">
<label><input name="" type="radio" class="sum" value="2.5">спички 100шт.</label>
<label><input name="" type="radio" class="sum" value="100">гречка 1кг</label>
<label><input name="" type="checkbox"  class="sum" value="333">сахар 1кг</label>
</form>
<output></output>
</body>
</html>
Ответить с цитированием
  #14 (permalink)  
Старый 05.04.2020, 18:19
Интересующийся
Отправить личное сообщение для AaronWolfsberg Посмотреть профиль Найти все сообщения от AaronWolfsberg
 
Регистрация: 04.04.2020
Сообщений: 11

Возможно ли это реализовать? Или как-то "закруглить" чекбоксы?)
Ответить с цитированием
  #15 (permalink)  
Старый 05.04.2020, 18:20
Интересующийся
Отправить личное сообщение для AaronWolfsberg Посмотреть профиль Найти все сообщения от AaronWolfsberg
 
Регистрация: 04.04.2020
Сообщений: 11

Спасибо большое))
Ответить с цитированием
  #16 (permalink)  
Старый 05.04.2020, 18:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,608

Сообщение от MC-XOBAHCK
А радиокнопки - это переключатель, где можно выбрать один вариант. В этом их предназначение. Только один.
Ответить с цитированием
  #17 (permalink)  
Старый 05.04.2020, 18:22
Интересующийся
Отправить личное сообщение для AaronWolfsberg Посмотреть профиль Найти все сообщения от AaronWolfsberg
 
Регистрация: 04.04.2020
Сообщений: 11

Сообщение от рони Посмотреть сообщение
Понял))
Ответить с цитированием
  #18 (permalink)  
Старый 05.04.2020, 18:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,608

Сообщение от AaronWolfsberg
Или как-то "закруглить"
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .sum + span{
     background-color: #D3D3D3;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     display: inline-block;
     border: 4px solid #8B4513;
  }
  .sum:checked + span {
    background-color: #006400;
  }
  .sum{
      display: none;
  }

  </style>

  <script>
addEventListener( "DOMContentLoaded" , function() {
function showTotal()
{
var total = Array.prototype.reduce.call(document.querySelectorAll(".sum:checked"),
function(sum, elem) {
return sum + +elem.value
}, 0);
document.querySelector("output").innerHTML = total.toFixed(2)
}
document.querySelector("form").addEventListener("change", showTotal)
  });
  </script>
</head>
<body>
<form action="http://">
<label><input name="" type="checkbox" class="sum" value="2.5"><span class="checkmark"></span>спички  100шт.</label>
<label><input name="" type="checkbox" class="sum" value="100"><span class="checkmark"></span>гречка 1кг</label>
<label><input name="" type="checkbox"  class="sum" value="333"><span class="checkmark"></span>сахар 1кг</label>
</form>
<output></output>
</body>
</html>
Ответить с цитированием
  #19 (permalink)  
Старый 05.04.2020, 18:51
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 449

Вот ещё такое решение:
<div>
    <input type="checkbox" name="price" value="170"/>
    <label>250г</label>
</div>
<div>
    <input type="checkbox" name="price" value="680"/>
    <label>1000г</label>
</div>
<div>
    <input type="checkbox" name="price" value="680"/>
    <label>1000г</label> 
</div>
<div>
    <input type="checkbox" name="price" value="680" />
    <label>1000г</label>
</div>

<hr>

<div>
    <span id="result">0</span> грн.
</div>

<script>
    let result = document.querySelector('#result');

    function sum() {    
        let checks = document.querySelectorAll('input[name="price"]:checked');
        let prices = [];
        let summa;

        if (checks.length > 0) {
            checks.forEach(el => prices.push(+el.value));
            summa = prices.reduce((acc, element) => acc + element);
        }
        else summa = 0;

        result.textContent = summa;
    }

    document.querySelectorAll('input[name="price"]').forEach(el => el.addEventListener('input', sum));
</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как дописать калькулятор Срочно!! lexicon39 Общие вопросы Javascript 1 05.02.2018 01:51
СРОЧНО!!! Калькулятор. zima5036 Работа 5 09.08.2017 13:25
Срочно нужна помощь! Пожалуйста((( Vuhrashka (X)HTML/CSS 2 25.03.2015 12:48
Сделать калькулятор на сайт. asderru Работа 1 22.07.2010 12:46