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.
Related
I writing an app in AngularJS2, and I have a simple navigation bar on the top. The user is supposed to click on navigation and page jump to sections.
Navigation has inline anchor tags with input radio buttons in them.
<label for="yp">
<input type="radio" id="yp">This is a radio bitton
</label>
The problem is sometimes anchor tag works, and radio input doesn't, and sometimes radio input works and the anchor doesn't.
How can I resolve it preferably without JS/AngularJS2?
I think this code will confuse Angular, because when you click, angular does not know if you clicked button or a tag or both.
Try something like this:
<input type="radio" id="yp">
This is a radio bitton
You may also want add some CSS to align input and a tags as you want.
I have a empty page where i dinamically add the element, i'm tryng to use materialize and i have a graphic problem...
I have follow the different tutorial on "http://materializecss.com/" to add the element with the correct method, but i have a problem with checkbox...
If i add the checkbox directly on the HTML page i have some graphic effect on checking and unchecking checkbox, but i must add it with javascript/jquery (dinamically) and i lost the graphic error.
On the website there is some initialization function to solve similar problem, but there isn't a initialization function for checkbox...
Someone say how to manually initialize checkbox with Materialize?
ty!
edit:
i have id and for on my checkbox...
sorry gor difficult code but it it's everithing dinamically added...
You have to have <span> right after your checkbox. Thing is that all magic about creating nice checkbox happens inside of span rather than input itself.
So here is minimal structure of HTML to get fancy checkbox in Materialize
<input type="checkbox" />
<span></span>
When you add them dynamically, do you also add the for attribute in the label for the checkbox? Per Materialize's documentation for Checkboxes:
The for attribute is necessary to bind our custom checkbox with the input. Add the input's id as the value of the for attribute of the label.
An ID should be unique within a page.
With JavaScript is it possible to have a drop down menu display a form field with an input type of text, instead of a list option? Could I get a jsfiddle demo example?
I recommend using JQuery to do this? Basically hide and show a div with all your input fields on it. This way you can create the illusion that it's a native dropdown. A standard dropdown does not support custom markup. There are aloso third party alternatives for "custom dropdowns" I suspect they are all implemented using some variation on what I suggested above...
Of course it is possible, but I doubt it is possible using a common <select> element. You should probably create a <div> consisting of several inputs (i.e. <input type = "text">).
Then you'll have a button (with a down-pointing arrow image :) ) and to its onclick event, you'll bind a function that shows your <div>. To hide the <div>, you can bind the hiding function to a click on the background or another click on your button.
To add some elegancy and create a dropdown effect while showing the <div>, you can set its height to 0 and then continually increment it with a timer.
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.
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!