I was able to create price change on multiple checkboxes selected, but what if we want to get this done for radio buttons checked?
In that case no summation, but just price change.
<input class="radio" id="one" type="radio" data-price="10">one<br />
<input class="radio" id="two" type="radio" data-price="5">two<br />
<input class="radio" id="three" type="radio" data-price="2.7">three<br />
<span class="price">17</span>
Hi @codeispoetry, a radio input only makes sense when there is at least one further radio with the same name, otherwise it basically behaves like a checkbox that cannot be unchecked… and in your markup all radios are already checked from the start. Also, why are you using a data attribute instead of giving them actual values?
As for the range in general though, that could be achieved by map()ing the checked checkboxes to their values (or data-price attributes, if you prefer), and then printing the min() and max() like so:
$('.checkbox').on('change', function() {
var prices = $('.checkbox:checked').map(function () {
return parseFloat(this.value)
}).get()
if (prices.length) {
$('.price').text(
Math.min.apply(null, prices) +
' - ' +
Math.max.apply(null, prices)
)
} else {
$('.price').text('')
}
})
In a real live situation, the values will be dynamic for every page/product and will come through product input. Means value will be different for different products.
checked was put by mistake.
And this wouldn’t work with value attributes?
<input class="checkbox" id="price-1" type="checkbox" value="10">
May be yes. i am naive. you may be right. Lets focus on type=“radio” for now.
Considering this how will this code be changed →
Okay… well either you give all radios the same name, in which case you can only select one at a time and there wouldn’t be a range to calculate. Or you don’t give them the same name, in which case no radio can get unchecked. So what’s wrong with using checkboxes?
Am I right in understanding that the OP wants radio buttons to be used instead of checkboxes?
Each of those input methods inform the user about how they are intended to be used.
Radio buttons only allow one to be selected, and you can’t unselect a radio button, other than to choose a different radio button.
Checkboxes let you turn them on and off at will, with no restrictions on how many are selected.
I need to ask you, why?
Yes,
There are 3 licenses:
Only can be chosen. so the radio button needed and I want to update the price in front of them in real-time based on the radio button chosen.
Now,
There are add on services.
So Checkbox.
have accomplished the checkbox part, but stuck in radio button part.
Checkbox means that any combination of the choices are allowed.
For example:
[x] No add on can be chosen
[x] One can be chosen
[ ] all can be chosen
Is it allowed for someone to select all three choices? I think that answer might be no, in which case radio buttons are the required user interface.
( ) No add on can be chosen
(o) One can be chosen
( ) all can be chosen
I have added the visual description please see.
That’s not good enough.
Is it not visible?
Why are checkboxes that allow the wrong user interaction more important for you to use, than radio buttons that enforce the correct interaction?
It’s not only about the interaction of course. Many people using it will notice that checkboxes are used when radio buttons should have been used instead, and think that you are a complete amateur.
This may be helpful:
https://www.mojomarketplace.com/item/benedicto-non-profit-multipurpose-wordpress-theme
both license selection(In our case radio button) and check boxes are needed.
One license out of 3 + addon services; that may be null, one or all.
Yes, in that situation those checkbox options are exclusive. You are allowed to select anywhere from 0 to all of those checkboxes.
The earlier example that you gave is one where only one option out of the list is allowed.
You are not allowed to select zero, or 2, or 3 of those. You are only allowed to select 1 of those. That is when the options dialog should be used instead.
I think that I got it wrong. My realization is that you are not displaying this on the screen:
Instead, you were describing that there are several options that the user has the choice of choosing any combination of, in which case checkboxes are the correct interface.
My apologies for the misunderstanding.
Ah okay so you want to display the radios in addition to the checkboxes, rather than instead of them? But in that case, what should the range refer to – the sum of the checkboxes and value of the selected radio, or just the values of all selected elements? As I said earlier, a range doesn’t make a lot of sense for the radios alone where only one element can be selected anyway…
Unfortunately I’m not able to see your visualization as it requires flash player to be installed.
Yes sir, sorry my bad. English is not my first language sometimes I will feel I fail to convey message in the first instance to those who are native to English, but mostly I am good. Thank you both of you for being so patient and listening to my needs.
Let me make a GIF.
GIF Here
