I have a function using jquery that updates a form when an image is click.
I need to add to that function so that a specified radio button is selected.
How can I select a radio button using jquery please?
UPDATE:
I'll explain further...I have overlayed an image and hid the radio button...so what the user clicks on an image it will check the selected radio.
Here's how each radio looks like:
<label style="display: inline; " for="select_theme_a">
<img src="images/icons/theme1.png" />
<input checked="checked" class="select_control" id="select_theme_a" name="select_theme" type="radio" value="a" onclick="return submitForm();" style="display:none" />
</label>
There's 4 radio buttons .. 4 different images to click on.
Hope this helps
How can I select a radio button using jquery please?
You can use attr method like this:
$('#radio-id').attr('checked', true);
If radio element is inside same parent element as image than you can use this piece of code inside function that handles image click event:
$(this).parent().find(":radio").attr('checked', true);
Related
I have a set of radio buttons that when I click them they show different content.
<div class="radio" ng-init="topRadios()">
<input type="radio" ng-model="topTable" value="topCategory" ng-change="updateTotals('topCategory')">TY 30 Categories</label>
<input type="radio" ng-model="topTable" value="topSupplier" ng-change="updateTotals('topSupplier')">TY Top 10 Suppliers</label>
<input type="radio" ng-model="topTable" value="topBrand" ng-change="updateTotals('topBrand')">TY Top 10 Brands</label>
</div>
And I have a button to apply some filters to the information that is displayed depending o the radio button selection.
<button class="goButton btn btn-xs" ng-class="css" ng-click="go()" ng-disabled="isClicked"> Apply </button>
When I click on the third button to see that info for example and then the Apply button with some filters the page refresh and what I want is that when the info and radio buttons displayed the first radio button is selected.
Can anyone help me please?
sounds like what you want to do is set an initial value for your radio input's ng-model in your controller:
$scope.topTable = 'topCategory';
you probably also want to reset the input's value in your go function after you apply your filtering with that same code snippet.
I am working with JSP and I have a html form in which I have a button at the top which is Process button. Now if I click on that Process button, it shows me a form which has two radio button - TestClient and TestServer.
It also has Submit button in that form.
Here is my jsfiddle
Problem Statement:-
Now what I am trying to do is - As soon as I click on TestClient radio button, I would like to show two text box and one radio button along with label just below that TestClient and TestServer like this -
TestClient TestServer
Name textbox
Id textbox
Sex Male Female
Submit button
In the same way if I am clicking TestServer button - I would like to show three text box and one drop down menu just below the TestClient and TestServer
TestClient TestServer
Address textbox
ClientId textbox
ServerId textbox
Country dropdownbox
Submit button
Is this possible to do using jquery in my current jsfiddle example? If yes, then any jsfiddle example will be of great help to me.
Very do-able. I've just added a quick example with a div for each radio button and some text in them. You can add your own inputs etc.
Hide these divs with CSS by default.
<div class="client" style="display: none">
Client fields here
</div>
<div class="server" style="display: none">
Server fields here
</div>
Then you can do something like this with your jQuery handler:
$('input[name="client"]').click(function() {
if($(this).attr('id') == 'client') {
$('.client').show();
$('.server').hide();
} else {
$('.client').hide();
$('.server').show();
}
});
if you do not want to code the html and show/hide it, but you prefere to generate it with jquery, you can also use this solution:
http://jsfiddle.net/fauv9/1/
<button id="primary">Process</button>
<form method='post'>
<h4>Process</h4>
<fieldset><legend>process</legend>
<input id="client" value="TestClient"type="radio" name="cli_srv">
<label for="client">TestClient</label>
<input id="server" value="TestServer" type="radio" name="cli_srv">
<label for="server">TestServer</label>
</fieldset>
<fieldset id="form_process">
</fieldset>
</form>
<button form="form_process">Submit</button>
and
$("#primary").click(function(){
$("form").show()
});
var form= $('#form_process');
$("#client").click(function(){
form.html(null);
form.append('<label for="cli_name">name</label><input value="name" id="cli_name"><br>')
form.append('<label for="cli_id">id</label><input value="id" id="cli_id"><br>')
// etc...
})
$("#server").click(function(){
form.html(null);
form.append('<label for="cli_name">address</label><input value="address" id="address"><br>')
form.append('<label for="srv_id">id</label><input value=" server id" id="srv_id"><br>')
// etc...
})
I've got some radio buttons styled to be hidden with the labels visible and styled as I want them.
The problem is when I click a label I don't get the radio button's value on the first click.
If you look here you can see what I mean: http://jsfiddle.net/bQwtK/1/
Is there a way to get the value on the first click?
ANSWER-
Thanks to asawyer and blocco- http://jsfiddle.net/bQwtK/14/
You can get the value with the code here:
$(".label_size").click(function()
{
alert($("#"+$(this).attr("for")).val());
})
Your code was broken - you missed a closing brace in your JavaScript.
http://jsfiddle.net/bQwtK/5/
Clicking the labels works. If you want the value of the radio buttons, remember that the click event refers to the label, not the radio button. You'll have to access the "for" attribute to get the radio button, and then get its value.
Hiya: your jsfiddle don't give any alert please see correct demo here": http://jsfiddle.net/NEu97/2/ & thank a sawyer : http://jsfiddle.net/NEu97/5/
Please let me know how it goes & hope this helps, :)
Jquery Code
$(".label_size").click(function()
{
alert(' clicked value =' + $(this).text());
alert(' correspong value =' + $('#'+$(this).attr('for')).val());
alert("D");
});
HTML
<div class="radio">(This is styled to be hidden)
<input name="size" class="radio_size" type="radio" id="radio_size_small" value="small "/>
<input name="size" class="radio_size" type="radio" id="radio_size_medium" value="medium"/>
<input name="size" class="radio_size" type="radio" id="radio_size_large" value="large"/>
</div>
<div class="radio_labels">
<label class="label_size" for="radio_size_small" id="label_size_small">SMALL</label>
<label class="label_size" for="radio_size_medium" id="label_size_medium">MEDIUM</label>
<label class="label_size" for="radio_size_large" id="label_size_large">LARGE</label>
</div>
I need some help please
This is the html
<div>
<p>match1</p>
teamA <input type="radio" name="match1" onclick="update('ab');" />
teamB <input type="radio" name="match1" onclick="update('ba');" />
<p>match2</p>
teamC <input type="radio" name="match1" onclick="update('ad');" />
teamD <input type="radio" name="match1" onclick="update('dc');" />
</div>
<script>
update(results){.................}
</script>
I have this html so what I want I to know is
How can I disable the radio button once the user clicks on it
because the update() function changes the values when user clicks on radio button
if he keeps clicking like that then values change each time he clicks
or if he clicks on sibling radio button
so please can anyone tell me how to disable radio button
once user clicks on it
like for instance in match1
if user selects teamA radio button then i want to disable both teamA and teamB radio buttons
same for match2 if he clicks then disable the clciked radio and sibling radio aswell
Thanks for reading this can anyone help me please
I can use plain js, jquery or libraries
Use this:
$(":radio").click(function(){
var radioName = $(this).attr("name"); //Get radio name
$(":radio[name='"+radioName+"']").attr("disabled", true); //Disable all with the same name
});
What we're doing, is, when a user clicks a radio button, disable all radios with the same name.
Hope this helps.
Cheers.
Using Javascript, you can use a solution like this:
document.getElementById("IDOfButtonElement").onclick = function(){
document.getElementById("IDOfButtonElement").disabled=true;
}
jsfiddle example
http://jsfiddle.net/nhZXg/
code
$(":radio").click(function(){
$(this).attr('disabled','disabled');
});
this is the general way of doing it.
jQuery("input:radio").attr('disabled',true);
or
jQuery("input:radio").attr('disabled','disabled');
Try this:
this.setAttribute('disabled','disabled');
I suggest you to add label tag around your inputs. It cause when user clicks on the text radio button changes.
<label>teamA <input type="radio" name="match1" onclick="update('ab');" /></label>
onclick="update('ad', this);"
function onclick(word, element){
$(element).attr('disabled', 'disabled');
}
I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this?
I tried to add the onclick of the input to the onclick of the label but that doesn't work.
Any suggestions/solutions would be wonderful.
How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.
Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
Select All
</label>
You can also extract the event code from the HTML, like this :
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>
<script>
function selectAll(frmElement, chkElement) {
// ...
}
document.getElementById("check_all_1").onclick = function() {
selectAll(document.wizard_form, this);
}
</script>
jQuery has a function that can do this:
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false;
$("#INPUTNAMEHERE").click(function() {
$("input[type=checkbox]").attr("checked",!toggle);
toggle = !toggle;
});
That should do what you want if I understood what you were trying to do.