Динамическое изменение значения переключателя
У меня есть значение переключателя (количество) и значение флажка (количество) когда кто-то нажимает кнопку флажка, сумма была добавлена к сумме значения переключателя.
<label><input type = "checkbox" value = "500"> Include Fare (Rs.500/-)</label>
<label><input type = "radio" name = "optradio" value = "4700">Price : 4700</label>
Если покупатель установит флажок, значение радиокнопки будет отображаться как 5200.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
У меня нет особой информации в вашем вопросе, чтобы помочь вам, но я создал этот пример
<!DOCTYPE html>
<html>
<body>
<form>
<input onclick = "check1()" type = "radio" name = "check1">check1<br>
<input onclick = "check2()" type = "radio" name = "check2">check2
</form>
<script>
function check1() {//when selected check1 do this
//todo
}
function check2() {//when selected check2 do this
//todo
}
</script>
</body>
</html>
Новое обновление
HTML:
<label><input onclick = "increasePrice(this)" type = "checkbox" value = "500"> Include Fare (Rs.500/-)</label>
<label><input onclick = "increasePrice(this)" type = "checkbox" value = "800"> Include Other Fare (Rs.800/-)</label>
<label><input class = "price-input" type = "radio" name = "optradio" value = "4700">Price : <span class = "price">4700</span></label>
<label><input class = "price-input" type = "radio" name = "optradio" value = "2000">Price 1: <span class = "price">2000</span></label>
Javascript:
function increasePrice(checkbox) {
var increase = parseInt(checkbox.value);
debugger;
var price_inputs = document.getElementsByClassName("price-input");
var price_span = document.getElementsByClassName("price");
for(var i = 0; i < price_inputs.length; i++) {
var price = price_inputs.item(i);
var newValue = parseInt(price.value);
if (checkbox.checked){
var newValue = newValue + increase;
} else {
var newValue = newValue - increase;
}
price_span.item(i).innerHTML = newValue;
price.value = newValue;
}
};
Он обновляет текст и значение radio и идет в одну сторону, а затем в другую, если флажок не установлен, цена соответственно снижается. Кроме того, он работает с несколькими флажками и переключателями без необходимости изменять Javascript.
Вы можете проверить это здесь.
Вот это все вместе:
<!DOCTYPE html>
<html>
<body>
<form>
<label><input onclick = "increasePrice(this)" type = "checkbox" value = "500"> Include Fare (Rs.500/-)</label>
<label><input onclick = "increasePrice(this)" type = "checkbox" value = "800"> Include Other Fare (Rs.800/-)</label>
<label><input class = "price-input" type = "radio" name = "optradio" value = "4700">Price : <span class = "price">4700</span></label>
<label><input class = "price-input" type = "radio" name = "optradio" value = "2000">Price 1: <span class = "price">2000</span></label>
</form>
<script>
function increasePrice(checkbox) {
var increase = parseInt(checkbox.value);
var price_inputs = document.getElementsByClassName("price-input");
var price_span = document.getElementsByClassName("price");
for(var i = 0; i < price_inputs.length; i++) {
var price = price_inputs.item(i);
var newValue = parseInt(price.value);
if (checkbox.checked){
var newValue = newValue + increase;
} else {
var newValue = newValue - increase;
}
price_span.item(i).innerHTML = newValue;
price.value = newValue;
}
};
</script>
</body>
</html>
флажок, имеющий некоторое значение цены, мне нужно добавить флажок и значение поля радио и отображать рядом с полем переключателя
У меня есть 10 полей пакета, как использовать эту функцию для нескольких полей ?????
@Jai Я обновил свой ответ, помня об этих двух вещах. Это работает для нескольких флажков.
он активирован для одного переключателя, у меня есть несколько переключателей, он изменит значение для одного переключателя, мне нужно, когда пользователь установит один флажок, все значение переключателя увеличится
@Jai Я обновил, чтобы включить это, но вы должны были объяснить все это с самого начала или подумать об использовании кода в качестве основы для работы над тем, что вам нужно
@Jai в таком случае было бы здорово, если бы вы выбрали его как правильный ответ, нажав галочку
Вот и решение
function handleClick(cb) {
var cb_val = parseInt(cb.value);
var price = parseInt(document.getElementById("radioPrice").value);
if (cb.checked) {
document.getElementById("radioPrice").value = price + cb_val;
document.getElementById("priceText").innerHTML = "Price : " + (price + cb_val);
} else {
document.getElementById("radioPrice").value = price - cb_val;
document.getElementById("priceText").innerHTML = "Price : " + (price - cb_val);
}
}<label><input type = "checkbox" value = "500" onclick='handleClick(this);'> Include Fare (Rs.500/-)</label>
<label><input id = "radioPrice" type = "radio" name = "optradio" value = "4700"><span id = "priceText">Price : 4700</span></label>Надеюсь, что это поможет вам.
Я использовал ненавязчивые принципы, чтобы привязать даже слушателей к флажкам с общим атрибутом имени.
Затем функция calculateFare перебирает отмеченные флажки и добавляет их значения к базовой цене. Базовая цена удерживается в атрибут данных, который я добавил к переключателю. Эта пересмотренная цена затем используется в качестве значения для переключателя, и отображаемая цена обновляется.
Используя эту технику, вы можете добавлять / удалять флажки, не обновляя скрипт.
var fareBoxes = document.querySelectorAll("[name='cbAdditional']");
//Add event listener to the check boxes
for(var i = 0; i < fareBoxes.length; i++)
{
fareBoxes[i].addEventListener("click", calculateFare);
}
//The function attached to the event listener
function calculateFare(){
var basePrice = parseInt(document.getElementById("price-input").dataset.baseprice, 10);
//get selected boxes
var checked = document.querySelectorAll("[name='cbAdditional']:checked");
//Interate our checked boxes and add to the price
for(var i = 0; i < checked.length; i++){
basePrice += parseInt(checked[i].value,10);
}
//Set Value and display
document.getElementById("price-input").value = basePrice;
document.getElementById("price").innerHTML = basePrice;
console.info(document.getElementById("price-input").value);
}<form>
<label><input type = "checkbox" value = "100" name = "cbAdditional"> Weekend Rate (Rs.100/-)</label>
<label><input type = "checkbox" value = "200" name = "cbAdditional"> Junior Fare (Rs.200/-)</label>
<label><input type = "checkbox" value = "500" name = "cbAdditional"> Include Fare (Rs.500/-)</label>
<label><input type = "checkbox" value = "800" name = "cbAdditional"> Include Other Fare (Rs.800/-)</label>
<label><input id = "price-input" type = "radio" data-baseprice = "4700" name = "optradio" value = "4700">Price : <span id = "price">4700</span></label>
</form>
Привет, Джай, добро пожаловать в Stack Overflow. Я хотел бы помочь ответить на ваш вопрос, но, к сожалению, он не соответствует стандартам качества для этой формы. Прочтите, пожалуйста, «Как задать вопрос» SO (stackoverflow.com/help/how-to-ask) и обновите свой пост. Тогда буду рада помочь :)