i am dynamically creating radio using jquery as shown belown.
but they value only selected in ff,ie8.
ie6,ie7 not selecting the values.
how can i select the radio button value in ie6/7.
rand=$("<input type='radio' ></input>");
rand.attr("checked","checked");
$(document).append(rand);
My guess is that <input> does not have a closing tag.
Also give it a name attribute. If need be, set the checked attribute after appending to the DOM.
You could also do it like so
rand=$("<input type='radio' checked='checked' name='radio'/>");
$(document).append(rand);
Besides the missing name attribute as Russ Cam mentioned, and also losing the </input>, your radio button should also have a value. My guess is the browser relies on value especially for radios, to implement the "only one can be checked at a time" functionality...
Good luck!
Related
I was asked to do something particular, and after trying I eventually found this site https://codepen.io/elmahdim/pen/hlmri from which I'm using the JQuery. I however don't have any knowledge of it so I only understand in parts. What I'm trying to do is upon marking a checkbox an input type="text" appears below it, so if I check 3 results, input type="text"creates 3 fields, etc, and if I uncheck a checkbox, the camp gets deleted.
I've tried to do it by adding
$("div bb")
{
$('<input type="text" id="textbox" style="width:170px;"/><span> CHF <span>');
}
after $(".hida").hide();but as I have no knowledge of JQuery it obviously didn't work and I don't really know what now. Also before that input, is it possible to add some sort of variable that is "attached" to the input so I can specificy what that input is for? Like if I check "Mercedes" in the checkbox, the input type="text" is created and above it the name "Mercedes" then if I check "BMW" it makes another input type="text" with BMW written above it?
Also wruting the code like this $("div bb") { for some reason disabled the $. Not sure why.
One solution:
create an empty element in your html where the input fields
should appear (e.g. <div id="textfields"></div>)
find the "on-checkbox-click-event-handler", which happens to be this line in the jquery: $('.mutliSelect input[type="checkbox"]').on('click', function() {
add code to the handler at the correct location, to append/delete a text box (difficult if you don't know jquery at all). The correct location is where jquery looks for the "checked-state" of the checkbox. Use $().append() to create the text field and $().remove() to remove on unchecking the checkbox. Should be something like $("#textfields").append("<input type='text'/>"); you will need to add a class to the input field to later address it when removing.
Working pen:
https://codepen.io/anon/pen/gRdmXj
Happy coding!
I'm wrapping some radion button to give them a better style, using css and jquery to handle the radion selection.
I'm using this HTML to wrap the radio input element:
<button class="radio-button inches inches-selected">
<input type="radio" id="inches" name="unit" value="inches" checked="checked">
</button>
All works well as expected in each browser, but in IE when I try to get the checked status (set by default in the HTML) I get "undefined".
I've tried:
$("#inches").is(":checked");
$("#inches").attr("checked");
$("input[value=inches]").is(":checked");
but I always get "undefined".
Any suggestion?
I didn't think you could wrap an <input> in a <button>. But assuming you can, you should not use the selector $("input[value=inches]") since that would also select any other input elements (e.g. text boxes) that have inches as its current value. Other than that, I'm not familiar with the button wrapping technique so I am suspicious of that approach overall.
On a form I've two radio button Yes and No. I want to change the default look of radio buttons
to like this.
Edit: I would like to change the radio buttons into <a> anchor when JavaScript is enabled if it's not easy to change the look of default radio via css.
Easiest way? Set the images as labels with the for attribute pointing to the radio buttons. Then set the radio buttons to display:none;
<input type="radio" name="radio[1]" /><label for="radio[1]"><img src="/yes.png"></label>
<input type="radio" name="radio[2]" /><label for="radio[2]"><img src="/no.png"></label>
p.s. This uses built in HTML functionality that works everywhere and doesn't require javascript. Use some CSS meta selectors (:hover etc...) to add animation.
UPDATE:
Just looping back after a long time and realised this could do with a little more explanation for beginners. When the for attribute is set on a label, clicking the label is functionally the same as clicking the element it's for attribute points to. For completeness, the for attribute should be set to the id of the form element.
Rather than try to coerce the images to work with the <radio> tag, I would just put the images where you want them, bind the various behaviors to them using jQuery, and have them modify hidden input fields. I think it will be much easier that way.
I have a bunch of radio buttons, and depending on the choices of other radio buttons, some of radio's are disabled. The problem is that they the disabled ones remain checked. It's hard to explain this and it's not something I can show in code, because it's just a bunch of garbage and experiments.
So anyway, my question is, how do you find the first not disabled radio button in a radio button group (same name)?
Thanks for your help.
$(':radio:not(:disabled):first')
without first it will find all not disabled radios.
You can find all radiobuttons with :radio
You can reduce that result with :not
You can target all disabled elements with :disabled
You can return the first element from the given set with :first
$('input:radio:not(:disabled):first')
If you want to find out which radiobutton is checked, disregarding any disabled ones, you may want to do something like
$('input:radio:checked:not(:disabled)')
I'm using a column of checkboxes in a YUI DataTable, I works fine. But I haven't found a way to put a name and value attribute so I can use when the form is submitted.
Thanks in advance.
Does the API reference at http://developer.yahoo.com/yui/docs/YAHOO.widget.CheckboxCellEditor.html help?
In order to get a name and value attribute, you use a checkbox like this:
<input type="checkbox" name="the_name" value="the_value" />
In your server-side code, you would look into the POST or GET data for the name of the checkbox. If it is there, the checkbox was checked. If it isn't there, the checkbox was not checked.
http://www.w3schools.com/HTMLDOM/dom_obj_checkbox.asp
How I reed a attribute for a checkbox, if I use YUI of Yahoo. Normaly I can use "document.getElementById(objeto).checked" but with YUI not work?.