I am trying to show and hide a text field based on whether or not the user clicks a radio button. Is this possible? According to the docs, collapsible content needs a header.
Here is my code with no collapsible content:
<fieldset data-role="controlgroup" data-mini="true">
<input type="radio" name="radio-mini" id="radio-mini-1" value="choice-1" />
<label for="radio-mini-1">No</label>
<input type="radio" name="radio-mini" id="radio-mini-2" value="choice-2" />
<label for="radio-mini-2">Yes</label>
</fieldset>
<label for="textarea-a">Textarea:</label>
<textarea name="textarea" id="textarea-a">
</textarea>
I would like the textarea to be shown if the radio button labeled "Yes" is clicked. Any ideas?
Well, if the radio and the textarea are siblings (and you're using, and happy to be compatible with up-to-date browsers) you could use CSS:
label[for=textarea-a],
#textarea-a {
display: none;
}
#radio-mini-2:checked ~ label[for=textarea-a],
#radio-mini-2:checked ~ #textarea-a {
display: block;
}
JS Fiddle demo.
In the above I removed your radio elements from the fieldset (as the textarea, and its label have to be siblings for this approach to work).
Related
I'm trying to do a pure css Show/Hide with radio button.
As seen in below snippet, it works like a charm.
.refusal,
.acceptance {
display: none;
}
input#refusal:checked~.refusal {
display: block;
}
input#acceptance:checked~.acceptance {
display: block;
}
This example works!</br>
<input type="radio" id="refusal" name="status" value="declined">
<label for="refusal">NO</label>
<input type="radio" id="acceptance" name="status" value="accepted">
<label for="acceptance">YES</label>
<form class="refusal">Something for REFUSAL</form>
<form class="acceptance">Something for ACCEPTANCE</form>
The problem is I want to modify my html input/label like this:
<label>
<input type="radio" id="refusal" name="status" value="declined">
NO</label>
However, if I do so, my snippet doesn't work any more (a css selector problem I guess).
But I don't know how to make it work. Thanks.
When you put the input inside a label element you change the level which it resides, so the tilde(~) selector does not work. If you really need the input to be inside a label element you need to use js.
I want to have radio input choice done with pushing buttons. (it's where you have several options and you can only choose one, usually done with radio dots) I used
<input id="test"><label for="test">Click Me</label>
To achieve the same effect but with text (when clicked on text radio button sets to checked="true", but no matter how I try to approach it while using HTML buttons I never can get radio input checked with just button and not text clicking. So this and variation of this where you set button as parent with for tag etc. didn't work for me.
<input id="test"><label for="test"><button>Click Me</button></label>
I can use something like addEventListeners to buttons and set the choice in javascript, but thought maybe there is an obvious pure HTML way I just could not figure out. Heres a small pen just for fiddling around - Cheers
Just use your first example and style the label element to look like a button.
Here is a quick example:
label {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
padding: 5px;
}
input {
display: none;
}
input:checked + label {
background: red;
}
<input id="radio1" name="radio" type="radio" />
<label for="radio1">Click me</label>
<input id="radio2" name="radio" type="radio" />
<label for="radio2">Click me</label>
<input id="radio3" name="radio" type="radio" />
<label for="radio3">Click me</label>
I'm using Twitter Bootstrap and I need two radio buttons, inline, with text on the left. So far afer a couple of pieces of different code I managed to get them inline, the text is on the right though. That's not the main problem anyway - take a look at how the radio buttons look:
On the left there seem to be two radio buttons, one on top of the other. Another thing is that when I choose the second one, the first one still appears chosen.
My questions (the most important on top):
1) How to deal with two radio buttons being chosen at the same time?
2) How to style the radio buttons? I tried background color, border - nothing changes
3) How to put the text to the left from the radio button? Changing its position before and after input doesn't change a thing.
Here's the code:
<form name="searchform">
<input type="text" name="searchterms">
<input type="submit" name="SearchSubmit" value="Search">
<label class="search-radio-text"><input type="radio" name="sex" value="male">Nazwisko</label>
<label class="search-radio-text"><input type="radio" name="sex" value="female">Tytuł</label>
</form>
One solution is to style the labels, after hiding the radio boxes themselves and binding the labels to their radio boxes.
HTML
<form name="searchform">
<input type="text" name="searchterms">
<input type="submit" name="SearchSubmit" value="Search">
<input type="radio" id="radio1" name="sex" value="male">
<label class="search-radio-text" for="radio1">Nazwisko</label>
<input type="radio" id="radio2" name="sex" value="female">
<label class="search-radio-text" for="radio2">Tytuł</label>
</form>
CSS
input[type="radio"] {
display:none;
}
input[type=radio] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
background-color: #e7e7e7;
border-color: #ddd;
}
input[type=radio]:checked + label {
background-image: none;
background-color:#99cc33;
}
Demo: http://jsfiddle.net/user2314737/X5gBm/
You can also simulate checkboxes using images like this: http://jsfiddle.net/user2314737/X5gBm/1/
My HTML radio buttons are lining up vertically not horizontally. Also, the text for each of them is not right beside the button like I wish it would be.
<fieldset>
<legend>Payment Method</legend>
<input type="radio" name="payment_type" value="bill"/>
<label for="bill">Bill Me</label>
<input type="radio" name="payment_type" value="credit" checked/>
<label for="credit">Credit Card</label>
<input type="radio" name="payment_type" value="paypal"/>
<label for="paypal">Paypal</label>
</fieldset>
That is the code for my HTML buttons. I have an external style sheet, but I have not implemented any styling for the buttons as of now.
Checkboxes are aligned horizontally by default, as are the labels. You must be setting display:block on an element. Either remove that, or overwrite it by applying display:inline-block.
Try the following CSS:
input[type="radio"] {
display:inline-block;
}
label {
display:inline-block;
}
As I said, these are default properties. You should receive the following results. jsFiddle here It would be better just to remove display:block as opposed to merely overwriting it.
Checkboxes in HTML forms don't have implicit labels with them. Adding an explicit label (some text) next to it doesn't toggle the checkbox.
How do I make a checkbox toggle from clicking on the text label as well?
If you correctly markup your HTML code, there is no need for javascript. The following code will allow the user to click on the label text to tick the checkbox.
<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />
The for attribute on the label element links to the id attribute on the input element and the browser does the rest.
This has been testing to work in:
IE6
IE7
Firefox
Set the CSS display property for the label to be a block element and use that instead of your div - it keeps the semantic meaning of a label while allowing whatever styling you like.
For example:
label {
width: 100px;
height: 100px;
display: block;
background-color: #e0e0ff;
}
<label for="test">
A ticky box! <input type="checkbox" id="test" />
</label>
Ronnie,
If you wanted to enclose the label text and checkbox inside a wrapper element, you could do the following:
<label for="surname">
Surname
<input type="checkbox" name="surname" id="surname" />
</label>
As indicated by #Gatekiller and others, the correct solution is the <label> tag.
Click-in-the-text is nice, but there is another reason to use the <label> tag: accessibility. The tools that visually-impaired people use to access the web need the <label>s to read-out the meaning of checkboxes and radio buttons. Without <label>s, they have to guess based on surrounding text, and they often get it wrong or have to give up.
It is very frustrating to be faced with a form that reads "Please select your shipping method, radio-button1, radio-button2, radio-button3".
Note that web accessibility is a complex topic; <label>s are a necessary step but they are not enough to guarantee accessibility or compliance with government regulations where it applies.
You can wrap your checkbox in the label:
<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
<input type="checkbox" name="surname">
</label>
You need to just wrap the checkbox in label tag just like this
<label style="height: 10px; width: 150px; display: block; ">
[Checkbox Label Here] <input type="checkbox"/>
</label>
FIDDLE
or you can also use the for attribute of label and id of your checkbox like below
<label for="other">Other Details</label>
<input type="checkbox" id="other" />
FIDDLE
this should work:
<script>
function checkbox () {
var check = document.getElementById("myCheck").checked;
var box = document.getElementById("myCheck")
if (check == true) {
box.checked = false;
}
else if (check == false) {
box.checked = true;
}
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>
if it doesnt, pleae corect me!
Wrapping with the label still doesn't allow clicking 'anywhere in the box' - still just on the text!
This does the job for me:
<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>
but unfortunately has lots of javascript that is effectively toggling twice.