BG Development Форуми -> HTML/JS radio button and checkbox

BG Development · За реклама · За контакти

Помощ

Търсене

Потребители

Календар

Правила

Здравей! ( Включване | Регистриране )

BG Development Форуми -> Програмиране -> HTML/CSS/JavaScript/VBScript

HTML/JS radio button and checkbox, как да изваждам стойност

Абонирай се за темата | Изпрати адреса на темата на приятел | Принтирай темата

dilqn4os

Публикувано на: 06-07-2023, 14:29

Име:
Група: Потребител
Ранг: Активен

Мнения: 191
Регистриран на: 11.06.09

Стигнах до тук и не мога да намеря решение къде бъркам.

1. Направим съм след като натисна единия checkbox да добави стойност към тотала, но след като го uncheckn-a и не я изважда.

2. Другото е че ако маркирам checkbox-a и единия от двата радио бутона не добавя новата стойност и маха стойността на checkbox-a

Това е част от html кода. Този скрипт пресмята стойността ама нещо не съм го направил както трябва. Ще съм благодарен някой ако може да даде съвет.

CODE

<input class="group" type="radio" name="rb" value='4.90' onclick="add_delivery_cost(this.value)" />

<input class="group1" type="checkbox" value='13.95' name="rb" id="total" onclick="add_delivery_cost(this.value)" />

<input class="group2" type="radio" name="rb" value='5.90' onclick="add_delivery_cost(this.value)" />

<input class="group3" type="radio" ng-model='mValue' value="" checked="checked"/>

<div class="container">
<div class="div24">Междинна сума:</div>
<div class="div25">27.90лв</div>
<div class="div26">4.90лв</div>
<div class="div27">Общо:</div>
<div class="div28">Информация</div>
<div class="frame-child12"></div>
<div class="frame-child13"></div>
<div class="frame-child14"></div>
<img class="removal-3-icon" alt="" src="./public/removal-3@2x.png" />

<div class="div29">
<p class="p"> тест</p>
<p class="p">Над 400 числа</p>
<p class="p">друг тест,</p>
<p class="p">много</p>
<p class="p">други.</p>
</div>
<div class="div30">68.00 лв.</div>
<div class="div31">72.90 лв.</div>
<div class="div32">27.90лв.</div>
<div class="div33" id="total-price-td">27.90лв.</div>
<input type="hidden" id="total-price" value="27.90">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
var price_string=$('#total-price').val();
function add_delivery_cost(val){

var delivery_cost=parseFloat(val);//Converting to float value//Returns 24.00
var price=parseFloat(price_string);//Converting to float value
var total_price=(price+delivery_cost).toFixed(2);//Adding delivery cost to price and rounding to 2 decimal points
var price_html=''+total_price;
$('#total-price-td').html(price_html);//Updating the `html` content of total-price with a new value after adding delivery cost to the price.
}
</script>

thrawn	Публикувано на: 06-07-2023, 15:50
Име: Група: Потребител Ранг: Почетен член Мнения: 3521 Регистриран на: 17.01.17	В тоя код липсва логиката... Направил си манипулатор на събитие който приема за параметър стойност (число) която се добавя към нещо. Но на теб ти трябва манипулатор който да проверява състоянието на всички контроли от който зависи изчислението, и да прави калкулацията на база техните актуални стойности (стойността зададена на съответния контрол се добавя само ако той е избран/селектиран)

dilqn4os

Публикувано на: 06-07-2023, 16:23

Име:
Група: Потребител
Ранг: Активен

Мнения: 191
Регистриран на: 11.06.09

QUOTE (thrawn @ 06-07-2023, 15:50)

В тоя код липсва логиката...

Направил си манипулатор на събитие който приема за параметър стойност (число) която се добавя към нещо. Но на теб ти трябва манипулатор който да проверява състоянието на всички контроли от който зависи изчислението, и да прави калкулацията на база техните актуални стойности (стойността зададена на съответния контрол се добавя само ако той е избран/селектиран)

Този манипулатор трябва ли да е javascript отделен, който да прави проверките и изчислението.

thrawn	Публикувано на: 06-07-2023, 16:28
Име: Група: Потребител Ранг: Почетен член Мнения: 3521 Регистриран на: 17.01.17	Така както е в момента става. Само махни параметърът който приема add_delivery_cost (просто не ти трябва, поне на тоя етап). И в тялото на функцията си направи изчислението в съответствие със състоянието на контролите. Имай в предвид, че парите и числата с плаваща запетая не се обичат, та внимавай какво смяташ.

dilqn4os

Публикувано на: 06-07-2023, 18:02

Име:
Група: Потребител
Ранг: Активен

Мнения: 191
Регистриран на: 11.06.09

Благодаря за съвета, но нещо пак не мога да ги наглася след като махнах параметъра на add_delivery_cost.

Пробвах друго и в момента добавя стойността(цената) на checkbox-a и я изважда като го uncheck-а, работи и с radio бутоните, но като маркирам checkbox и натисна някой от радио бутоните не прави сметките правилни.

CODE

<input class="group" type="radio" name="rb" value='4.90' id="office" onclick="add_delivery_cost(this.value)" />

<input class="group1" type="checkbox" value='13.95' name="rb" id="total" onclick="updateTotal(this)" />

<input class="group2" type="radio" name="rb" value='5.90' id="home" onclick="add_delivery_cost(this.value)" />

<input class="group3" type="radio" ng-model='mValue' value="" checked="checked"/>

<div class="container">
<div class="div24">Междинна сума:</div>
<div class="div25">27.90лв</div>
<div class="div26">4.90лв</div>
<div class="div27">Общо:</div>
<div class="div28">Информация</div>
<div class="frame-child12"></div>
<div class="frame-child13"></div>
<div class="frame-child14"></div>
<img class="removal-3-icon" alt="" src="./public/removal-3@2x.png" />

<div class="div29">
<p class="p"> тест</p>
<p class="p">Над 400 числа</p>
<p class="p">друг тест,</p>
<p class="p">много</p>
<p class="p">други.</p>
</div>
<div class="div30">68.00 лв.</div>
<div class="div31">72.90 лв.</div>
<div class="div32">27.90лв.</div>
<div class="div33" id="total-price-td">27.90лв.</div>
<input type="hidden" id="total-price" value="27.90">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
var price_string = $('#total-price').val();

function add_delivery_cost(val) {
var delivery_cost = parseFloat(val);
var price = parseFloat(price_string);
var total_price = (price + delivery_cost).toFixed(2);
var price_html = '' + total_price;
$('#total-price-td').html(price_html);
}

function updateTotal(checkbox) {
var total_price = parseFloat($('#total-price').val());
var deliveryOffice = parseFloat($('#office').val());
var deliveryHome = parseFloat($('#home').val());

if (checkbox.checked) {
total_price += parseFloat(checkbox.value);
} else if (checkbox.unchecked) {
total_price -= parseFloat(checkbox.value);
}

if (deliveryOffice.checked || deliveryHome.checked ) {
total_price = total_price + parseFloat(radio.value) + parseFloat(checkbox.value);
}

$('#total-price-td').html(total_price.toFixed(2) + "лв.");
}

code2	Публикувано на: 10-07-2023, 07:30
Име: Група: Потребител Ранг: Редовен член Мнения: 545 Регистриран на: 11.06.16	На пръв поглед се вижда, че това "radio.value" някак е невалидна променлива във втората процедура. Грешката ти идва от използването на напълно неподходяща като променлива от тип входен параметър: "function updateTotal(checkbox) ...". Това "checkbox" го подмени например с думичката "element". Така на предпоследния ред на втората процедура трябва да имаш в скобите "parseFloat(element.value);", а не както е сега "checkbox.value", което те подведе да ползваш напълно недефинираното "radio.value".

1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)

Потребители, преглеждащи темата в момента:

« Предишна тема | HTML/CSS/JavaScript/VBScript | Следваща тема »

BG Development Форуми -> Програмиране -> HTML/CSS/JavaScript/VBScript