Javascript-форум - Калькулятор с 2мя ползунками

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Калькулятор с 2мя ползунками (https://javascript.ru/forum/jquery/64419-kalkulyator-s-2mya-polzunkami.html)

Цитата:

Сообщение от рони (Сообщение 425099)

fos,

out();

добавить в начало строки 89

Спасибо в очередной раз!)

Балин.. сколько в код не всматриваюсь так и не нашел, где можно припилить скрытие amount для слайдеров под чекбоксами...

Т.е. пока галка не стоит рядом с чекбоксом "0" отображается. Его бы как-нить display:none; до момента, пока чекбокс не checked... реально это вообще?

Цитата:

Сообщение от fos

реально это вообще?

нужно изменить один символ в строках 28 и 31 + на ~

.opt [type="checkbox"] ~ *{
   display: none;
}
.opt :checked ~ *{
  display:  block;
}

Цитата:

Сообщение от рони (Сообщение 425281)

нужно изменить один символ в строках 28 и 31 + на ~

.opt [type="checkbox"] ~ *{
   display: none;
}
.opt :checked ~ *{
  display:  block;
}

Гениально! :)

Снова добрый вечер знатокам! :)

В общем новая палка в колесах... пытался кастомизировать на css чекбокс и радио по примеру, но совместить данный пример не могу :( Отдельно работает, а если прикручиваю в див opt...

т.е. инпут делаю вида <input type="checkbox" class="checkbox" id="checkbox-1" /> и после него <label for="checkbox-1">Чекбокс переключается кликом по тексту ...</label>, то ваще чек пропадает из видимости, но если тыкнуть в пустоту - появляется все должным образом... битых часа 3 уже пытаюсь, но только все в недееспособный вид приходит :(

И еще засада - все что после инпута чекбокс пытаюсь написать - все хайдится пока чекбокс не "checked".. т.е. я хочу подписать рядом с чекбоксом что собсно это за галочка, а пока не нажмешь не увидишь :)

fos,
:(

добавили label так внесите изменения

.opt [type="checkbox"] + label ~ *{
   display: none;
}
.opt :checked + label ~ *{
  display:  block;
}

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  font-family: sans-serif;
  font-size: 12px;
}

.amount{
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;

}
.slider{
   width: 300px;
   margin: 20px;
}
.radio {
display: inline;
}
.opt{
  margin: 30px 0;
}

.opt [type="checkbox"] + label ~ *{
   display: none;
}
.opt :checked + label ~ *{
  display:  block;
}


/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
  vertical-align: top;
  margin: 0 3px 0 0;
  width: 17px;
  height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
  cursor: pointer;
}

/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */

/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}
.checkbox:not(checked) + label {
  position: relative; /* будем позиционировать псевдочекбокс относительно label */
  padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
  background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
  left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
    var data = [
        [50, 500, 25],
        [1, 6, 1],
        [0, 6, 1],
        [0, 500, 5]
    ];

    function out() {
        var x = $('[name="xradio"]:checked').index('[name="xradio"]') || 0;
        x = [30, 50, 100][x];
        var p = $(".opt .amount");
        var p1 = +p[0].value;
        var min = 1;
        if (p1 > 100 && p1 < 175) min = 2;
        /*  */
        $(".slider").eq(1).slider("option", {
            "value": Math.max(p[1].value, min),
            "min": min
        });
        var y = p[1].value * 900;
        var z = p[2].value * 1800;
        var w = p[3].value * 10;
        $(".res").html(p1 * x + y + z + w)
    }
    $(".opt").each(function(i, el) {
        var d = data[i],
            am = $(".amount", el),
            sl = $(".slider", el),
            c = $('[type="checkbox"]',
                el);
        sl.slider({
            min: d[0],
            max: d[1],
            step: d[2],
            slide: function(event, ui) {
                am.val(ui.value)
            },
            change: function(event, ui) {
                am.val(ui.value)
            },
            stop: out
        });
        sl.slider("option", "value", d[0]);
        if (c.length) c.on("click", function() {
            !this.checked && sl.slider("option", "value", 0);
            out()
        })
    });
    $('[name="xradio"]').on("click", out)
});
  </script>
</head>

<body>

<div class="radio">
<label><input type="radio" name="xradio" value="40" checked>RADIO1</label>
<label><input type="radio" name="xradio" value="50">RADIO2</label>
<label><input type="radio" name="xradio" value="100">RADIO3</label></div>


<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="opt">
  <input type="checkbox" id="checkbox1" class="checkbox">
  <label for="checkbox1">Я переключаю 1 чекбокс</label>
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="opt">
  <input type="checkbox" id="checkbox2" class="checkbox">
  <label for="checkbox2">Я переключаю 2 чекбокс</label>
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="res">0</div>
</body>
</html>

Спасибо, Великий мастер! :)

Я так и неугомонился с этой затеей.. уже раза 4 нападал на простой казалось бы чекбокс... Но, как всегда - либо не пашет скрипт полностью, либо чекбокс появляется, но в сумму не липнет :(

В общем нужно между чекбоксом:
<label for="checkbox1">Я переключаю 1 чекбокс</label>
и
<label for="checkbox2">Я переключаю 2 чекбокс</label>

Вставить чекбокс
<label for="checkbox3">Я переключаю 3 чекбокс</label>
и придать ему значение (4500), не засовывая в его содержимое слайдеры или еще что-либо.. тупо checked = +4500 к $(".res").html(p1 * x + y + z + w + q) к примеру через var q

пытался делать так:

<div class="opt">
  <input type="checkbox" id="checkbox1" class="checkbox">
  <label for="checkbox1">Я переключаю 1 чекбокс</label>
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>
<div class="opt">
<input type="checkbox" name="xcheck" value="4500" id="checkbox3" class="checkbox">
<label for="checkbox3">Я переключаю чекбокс за 4500</label>
</div>
<div class="opt">
  <input type="checkbox" id="checkbox2" class="checkbox">
  <label for="checkbox2">Я переключаю 2 чекбокс</label>
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>
-------
$(".res").html(p1 * x + y + z + w + q)
------
$(".opt").each(function(i, el) {
        var d = data[i],
         var q = $('[name="xcheck"]:checked').index('[name="xcheck"]') ,
            am = $(".amount", el),
            sl = $(".slider", el),
            c = $('[type="checkbox"]',
                el);
        sl.slider({
            min: d[0],
            max: d[1],
            step: d[2],
            slide: function(event, ui) {
                am.val(ui.value)
            },
            change: function(event, ui) {
                am.val(ui.value)
            },
            stop: out
        });
        sl.slider("option", "value", d[0]);
        if (c.length) c.on("click", function() {
            !this.checked && sl.slider("option", "value", 0);
            out()
        })
    });

колдовал и все ломаю.. в общем как обычно :(

fos,
добавлен класс .opt3

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body {
  font-family: sans-serif;
  font-size: 12px;
}

.amount{
  font-size: 22px;
  font-weight: bold;
  border:none;
  color: #ff5555;
  background: none;

}
.slider{
   width: 300px;
   margin: 20px;
}
.radio {
display: inline;
}
.opt{
  margin: 30px 0;
}

.opt [type="checkbox"] + label ~ *{
   display: none;
}
.opt :checked + label ~ *{
  display:  block;
}

.opt3 [type="checkbox"] + label ~ *{
   display: none;
}
.opt3 :checked + label ~ *{
  display:  block;
}
/* Cначала обозначаем стили для IE8 и более старых версий
т.е. здесь мы немного облагораживаем стандартный чекбокс. */
.checkbox {
  vertical-align: top;
  margin: 0 3px 0 0;
  width: 17px;
  height: 17px;
}
/* Это для всех браузеров, кроме совсем старых, которые не поддерживают
селекторы с плюсом. Показываем, что label кликабелен. */
.checkbox + label {
  cursor: pointer;
}

/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше.
Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked,
в них все нижеследующие стили не сработают. */

/* Прячем оригинальный чекбокс. */
.checkbox:not(checked) {
  position: absolute;
  opacity: 0;
}
.checkbox:not(checked) + label {
  position: relative; /* будем позиционировать псевдочекбокс относительно label */
  padding: 0 0 0 60px; /* оставляем слева от label место под псевдочекбокс */
}
/* Оформление первой части чекбокса в выключенном состоянии (фон). */
.checkbox:not(checked) + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
/* Оформление второй части чекбокса в выключенном состоянии (переключатель). */
.checkbox:not(checked) + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.3);
  transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */
}
/* Меняем фон чекбокса, когда он включен. */
.checkbox:checked + label:before {
  background: #9FD468;
}
/* Сдвигаем переключатель чекбокса, когда он включен. */
.checkbox:checked + label:after {
  left: 26px;
}
/* Показываем получение фокуса. */
.checkbox:focus + label:before {
  box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
    var data = [
        [50, 500, 25],
        [1, 6, 1],
        [0, 6, 1],
        [0, 500, 5]
    ];

    function out() {
        var x = $('[name="xradio"]:checked').index('[name="xradio"]') || 0;
        x = [30, 50, 100][x];
        var p = $(".opt .amount");
        var p1 = +p[0].value;
        var min = 1;
        if (p1 > 100 && p1 < 175) min = 2;
        /*  */
        $(".slider").eq(1).slider("option", {
            "value": Math.max(p[1].value, min),
            "min": min
        });
        var y = p[1].value * 900;
        var z = p[2].value * 1800;
        var w = p[3].value * 10;
        var q = $('#checkbox3').is(":checked")? 4500 : 0;
        $(".res").html(p1 * x + y + z + w + q)
    }
    $(".opt").each(function(i, el) {
        var d = data[i],
            am = $(".amount", el),
            sl = $(".slider", el),
            c = $('[type="checkbox"]',
                el);
            sl.slider({
            min: d[0],
            max: d[1],
            step: d[2],
            slide: function(event, ui) {
                am.val(ui.value)
            },
            change: function(event, ui) {
                am.val(ui.value)
            },
            stop: out
        });
        sl.slider("option", "value", d[0]);
        if (c.length) c.on("click", function() {
            !this.checked && sl.slider("option", "value", 0);
            out()
        })
    });
    $('[name="xradio"], #checkbox3').on("click", out);
    out()
});
  </script>
</head>

<body>

<div class="radio">
<label><input type="radio" name="xradio" value="40" checked>RADIO1</label>
<label><input type="radio" name="xradio" value="50">RADIO2</label>
<label><input type="radio" name="xradio" value="100">RADIO3</label></div>


<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="opt">
  <input type="checkbox" id="checkbox1" class="checkbox">
  <label for="checkbox1">Я переключаю 1 чекбокс</label>
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>
<div class="opt3">
  <input type="checkbox" id="checkbox3" class="checkbox">
  <label for="checkbox3">Я переключаю 3 чекбокс</label>
</div>
<div class="opt">
  <input type="checkbox" id="checkbox2" class="checkbox">
  <label for="checkbox2">Я переключаю 2 чекбокс</label>
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>

<div class="res">0</div>
</body>
</html>

:blink: :dance: :dance: :thanks: :thanks: :thanks: :thanks: :thanks: :thanks: :thanks: :thanks: :thanks: :thanks:

Слов нет.. Спасибище, профессор!!!!