Общая стоимость JQuery с полем ввода и переключателями

0

У меня есть следующий простой код JQuery, который берет ваш номер * цены, чтобы предоставить общее количество.

Мне также нужно включить в него опции с переключателями, если вы проверили +add на общую сумму.

Может ли кто-нибудь помочь мне, чтобы я мог добавлять опции переключателя, чтобы сделать это, чтобы ввести + радио кнопки, чтобы получить общую цену?

** Было бы неплохо, если бы цена была в режиме Live, когда вы набрали/радио, а не нажали кнопку submit, но это не обязательно.

У меня это до сих пор: http://jsfiddle.net/4bitlabs/tpkpd/15/

HTML:

<p class="list">How many "Linear Feet" of boards do you have?</p>
<input id="amount" />
<div class="addon">Add Paint $10.00<input id="amount" type="radio"value="10.00" class="radio"/></div>
<div class="price">$<label for="amount">0.00</label></div>

JQuery:

$(function () {
$('#amount').change(function () {
     var $this = $(this);

    $('label').text((parseFloat($this.val()) * 20.00).toFixed(2))            
});        
});

Заранее спасибо.

  • 0
    Id должны быть уникальными! Используйте class вместо Id или просто $('input[type="text"]')
  • 0
    попробовал, это позволяет радио работать, но не вход. он вычисляет только входные данные за раз, а не объединяет их. Благодарю.
Показать ещё 1 комментарий
Теги:
calculator
radio-button

2 ответа

0
Лучший ответ

Есть некоторые проблемы с вашим HTML. Идентификаторы должны быть уникальными.

Я сделал довольно серьезную переписку, которая, я думаю, сделает то, что вы ищете. Есть и другие способы сделать это, но это должно заставить вас начать

<input id="amount1" class="amount" />

Я сделал идентификаторы уникальными и дал полям ввода класс.

<input id="amount2" type="radio" value="10.00" class="radio addOn" data-for="amount1" />

Радиокнопки также имеют класс "addOn" и прикрепляются к метке через тег "data-for".

$(function () {
    $('.amount').change(function () {
        changeAmount($(this));
    });

    $('.addOn').change(function () {
        var $original = $('#' + $(this).data('for'));
        changeAmount($original);
    });
});

Есть два способа изменить количество: один, изменив поле ввода с классом amount, один - с помощью переключателя с классом addOn. Единственное различие заключается в том, что функция переключателя определяет, с каким полем ввода оно связано.

function changeAmount($element) {
    var amount = 0;
    amount = parseFloat($element.val()) * 20;
    // this handles the case when the val is not filled in.
    if (isNaN(amount)) {
        amount = 0;
    }
    var id = $element.attr('id');
    $('.radio:checked[data-for="' + id + '"]').each(function () {
        amount += parseFloat($(this).val());
    });
    $('label[for=' + id + ']').text(amount.toFixed(2))
}

jsFiddle

Поделиться
  • 0
    Благодарю. Это то, что мне было нужно. Вот скрипка: jsfiddle.net/4bitlabs/62vWH
  • 0
    Есть ли способ сделать так, чтобы при вводе в поле ввода он отображался в итоге без необходимости щелкать мышью?
Показать ещё 2 комментария
0

Использовать проверенное свойство. И вам лучше не использовать дублированные идентификаторы.

$(function () {
  $('#amount').change(function () {
    var $this = $(this);
    var addPoint = $('input[type="radio"]').prop('checked') ? 10 : 0;

    $('label').text((parseFloat($this.val()) * 20.00 + addPoint).toFixed(2))            
  });        
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню