How to output the value of my radio button when click - javascript

I'm very noob in javascript. My question is how do I show the value of my radio button when click?
I have this code:
<tr><td width="10px"></td><td width="60%">Neatness</td>
<td width="40%">
<input name="neat" type="radio" class="hover-star" value="1" title="Poor"/>
<input name="neat" type="radio" class="hover-star" value="2" title="Fair"/>
<input name="neat" type="radio" class="hover-star" value="3" title="Satisfactory"/>
<input name="neat" type="radio" class="hover-star" value="4" title="Outstanding"/>
</td></tr>
Say when my 1st radio button it will show 1 or so on.. How can I achieve this? Or better yet does anyone know how to do this in jquery.

Use the jQuery class selector and attach to the click event:
$('.hover-star').click(function () {
alert($(this).val());
}
Here's a working jsFiddle fiddle.
Alternatively, you could attach to the change event.
$('.hover-star').change(function () {
alert($(this).val());
}
Take a look at the jQuery selectors documentation.

With jQuery you can bind the click event to any element with class hover-star, and use the val method to get the value. This will fire whenever any radio button is clicked (even if the selection does not change):
$(".hover-star").click(function() {
var selectedVal = $(this).val();
});
You could also use the change event, which fires whenever the selected radio button changes:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
});
You say you want to "show" the value of the radio button, but as you haven't provided more details it's difficult to say where you want to show it! But the principle will be the same as I have shown above - in the event handler function you can do whatever you need to with the value.
Update based on comments
As you want to put the value into a div, you can simply do this inside the change event handler:
$("#yourDivId").text($(this).val());

Try this
$('.hover-star').click(function () {
alert($(this).val());
}

Here you go ...
$('.hover-star').click(function (){$('#someDiv').text($(this).val());

Jquery COde:
$(".hover-star").change(function() {
var selectedVal = $(this).val();
alert(selectedVal);
});
See Demo: http://jsfiddle.net/rathoreahsan/wVa7c/

Related

Display value from only checked checkbox and if other checkboxes are checked uncheck them

Lets say that I have 3 checkboxes:
<input type="checkbox" value="25,99" name="price">
<input type="checkbox" value="15,99" name="price">
<input type="checkbox" value="10,99" name="price">
and I want to display the value of the checked checkbox in a div, but only one checkbox can be active at a time.
I was trying to marry these two examples together but this seams kinda messy and overkill:
only one checked at the time
http://jsfiddle.net/MQM8k/
$('input.example').on('change', function() {
$('input.example').not(this).prop('checked', false);
});
with this link to live
$(document).ready(function() {
$("button").click(function(){
var favorite = [];
$.each($("input[name='sport']:checked"), function(){
favorite.push($(this).val());
});
alert("My favourite sports are: " + favorite.join(", "));
});
});
Thanks
An easy way is to uncheck all the checkboxes as the first thing you do upon detecting a click, and then re-check the one you are on.
$('.prx').click(function(){
$('.prx').prop('checked', false);
$(this).prop('checked', true);
let prx = $(this).val();
$('#msg').text(prx);
});
#msg{margin-top:20px;padding: 10px; background:wheat;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
25.99 <input type="checkbox" class="prx" value="25,99" name="price"><br>
15.99 <input type="checkbox" class="prx" value="15,99" name="price"><br>
10.99 <input type="checkbox" class="prx" value="10,99" name="price"><br>
<div id="msg"></div>
$(document).on("click", ".prx", function (){
var self = $(this);
$('.prx').not(self).prop('checked', false);
self.prop('checked', true);
alert(self.val());
});
You should really consider making this input a radio button.
You're essentially breaking the UX of checkboxes to not allow multiple selections. Radio button inputs do this behavior (one selection at a time) by default, will have expected tab actions for accessibility users and won't need all this extra JS.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

Get output of .change() function in .click() function

I have two radio buttons which both have values. When one is selected, and a button/link is clicked, the value of the selected radio button needs to be outputted to a text box.
Here is my HTML:
<form class="discount-choice" method="post" action="#">
<ul>
<li>
<input type="radio" value="1" name="discount" id="1-month" class="discount-checkbox" />
<label for="1-month">1 Month - no discount</label>
</li>
<li>
<input type="radio" value="0.95" name="discount" id="4-months" class="discount-checkbox" />
<label for="4-months">4 months - 5% discount</label>
</li>
</ul>
Get Result
<input type="text" class="result" />
</form>
and my JavaScript (jQuery):
var discount = $(".discount-checkbox").on("click", function () {
return this.value;
});
$(".get-result").on("click", function() {
$(".result").attr("value", discount);
});
When I click the button (after having selected a radio button), I just get [object Object] in the text box.
I'm not sure of the syntax for setting a variable to be a jQuery function so this is likely where I am going wrong. If anyone could give me some guidance that would be awesome.
Thank you for any help :)
discount is set to the jQuery object returned by $(".discount-checkbox"). You need to bind a click handler that updates a variable:
var discount = 0;
$(".discount-checkbox").on("click", function () {
discount = this.value;
});
Use this:
$(".get-result").on("click", function(e) {
e.preventDefault();
$(".result").val( $('.discount-checkbox:checked').val() );
});
You do not need the click handler on the checkbox as #billyonecan has mentioned in the comments.
And ... if you really need to attach an event handler to the checkboxes, that would be a change event handler instead of click.
Try This Code:
var discount;
$(".discount-checkbox").on("click", function () {
discount= this.value;
});
$(".get-result").on("click", function() {
$(".result").attr("value", discount);
});
no need of discount-checkbox click event
$(".get-result").on("click", function() {
var discount = $(".discount-checkbox:checked").val();
$(".result").val(discount);
});

Radio Button On select or unselect Javascript Jquery

When i select the radio button then i want to hide one div and when i uncheck the radio button then i want to show that div . please if anyone know. I want to hide div on check the radio button.
<input type="radio" id="fix" name="price" checked="checked" value="fix">
<div id="hour">
<input type="text" name="rs"/>
</div>
You can use the change() function from jQuery that triggers when the selector has been changed. Then just compare the val() with your value, and take action.
$("input[type='radio']").change(function() {
if ($(this).val() == "fix") {
// show div
} else {
// hide div
}
});
You have single radio button you probably want to use checkbox instead. As single radio button could not be unchecked.
Live Demo
Html
<input type="checkbox" id="fix" name="price" checked="checked" value="fix">
Javascript
$('#fix').change(function(){
$('[name=rs]')[0].style.display = this.checked ? 'block' : 'none';
});
$("input[type='radio']").change(function() {
if ($(this).val() == "fix") {
document.getElementById("hour").style.display = '';
} else {
document.getElementById("hour").style.display = 'none';
}
});
Simple solution.
We can't uncheck a radio button when there is only one.
So, change the input type to checkbox. Then you can use this CSS:
:checked + #hour{
display: none;
}
Working Fiddle

Knockout does not recognize manually click

Here is sample http://jsfiddle.net/HhXGH/57/
I am clicking radio button by jquery but knockout.js does not recognize it.Still it shows first clicked value.
<p>Send me spam: <input type="checkbox" data-bind="checked: wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
Preferred flavor of spam:
<div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor" /> Cherry</div>
<div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor" /> Almond</div>
<div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor" /> Monosodium Glutamate</div>
</div>
var viewModel = {
wantsSpam: ko.observable(true),
spamFlavor: ko.observable('cherry')
};
ko.applyBindings(viewModel);
$(':radio:last').click();
alert(viewModel.spamFlavor())
This because Knockout is subscribing to the click events of checked radio/checkbox elements only. If you checkout the binding handler code for checked. It does this.
var updateHandler = function() {
var valueToWrite;
if (element.type == "checkbox") {
valueToWrite = element.checked;
} else if ((element.type == "radio") && (element.checked)) {
valueToWrite = element.value;
} else {
return; // "checked" binding only
responds to checkboxes and selected radio buttons
}
So in order to get your code to work do this.
$(':radio:last').prop('checked', true).click();
However if the goal is to check the last value, why not just do
viewModel.spamFlavor("msg");
This would achieve the same result.
Hope this helps.
Adding $(':radio:last').attr('checked', true); in addition to triggering click makes it work for me:
http://jsfiddle.net/jearles/HhXGH/61/
I have two different jsFiddles since I'm not sure exactly what your after.
The first jsFiddle will respond via alert when the last radio button is manually clicked.
The second jsFiddle is your posted /57/ jsFiddle without the alert.
Using an alert or console.log with a function will actually invoke that function. That said, after you have manually set the .click() to the last radio button, it's inadvertently reset back to cherry since that's the default value.
RE-EDIT: The second jsFiddle now includes alert written in syntax that doesn't invoke the function & now uses shorted markup.

call change() event handler if I select radio button programatically

I have HTML like this:
<input type="radio" name="type" value="FL" checked="checked" />Fixed
<input type="radio" name="type" value="SV" />Saving
<input type="radio" name="type" value="L2" />Type 2
And following script
$(function () {
$('input[name=type]').change(function () {
alert($(this).val());
});
$('input[value=SV]').attr('checked', 'checked');
});
Firstly, have added a change event to radio button.
change event handler triggered if I am selecting radio button from UI.
But it does not triggered when I change selected radio button value pro-grammatically.
I want change event also to be triggered when I select radio button pro-grammatically.
You can use trigger() to programmatically raise an event:
$(function () {
$('input[name="type"]').change(function() {
console.log($(this).val());
});
$('input[value="SV"]').prop('checked', true).trigger('change');
});
It won't change automatically. You have to do one of the following:
either
$('input[value=SV]').attr('checked', 'checked').trigger("change")
or
$('input[value=SV]').attr('checked', 'checked').change();

Categories

Resources