I have three buttons the user can press. By default, I have the first one already pressed because I don't want the user to submit the form without pressing anything. The problem is that in mobile phones, if I press another button that hasn't the attribute of 'checked', it gets pressed normally but the one checked by default is not going away. This works fine in computer but not in mobiles. Any ideas?
This is my code:
<div class="control radio-toolbar" id="duration-picker">
<div class="control radio-toolbar container fm-radios">
<div style="display: inline-block" class="fm-radio dib">
<input checked class="date-button" type="radio" value="1" name="options" id="letter_pick_date_1" />
<label for="letter_pick_date_1">1 year</label>
</div>
<div style="display: inline-block" class="fm-radio dib">
<input class="date-button" type="radio" value="3" name="options" id="letter_pick_date_3" />
<label for="letter_pick_date_3">3 years</label>
<br><br>
</div>
<div style="display: inline-block" class="fm-radio dib">
<input class="date-button" type="radio" value="5" name="options" id="letter_pick_date_5" />
<label for="letter_pick_date_5">5 years</label>
</div>
</div>
</div>
Also one is above the other one and don't know how to solve this. I displayed them inline but wont work
EDIT: Another thing i could do is to have no default checked inputs. But how do I make this required so that nobody submits the form without pressing the buttons?
Related
I'm having some trouble with the <input> HTML tag. I try to make one box checked but it isn't working. The HTML file is running with PHP. As you can see I used the default checked in the input. But it isn't working. How can I fix this without jQuery?
<fieldset id="imageselector">
<label id="labelog" class="container imageinput" style="display:none;">
<input id="Radioog" name="radio" class="radio" type="radio" value="img" checked/>
<img id="selector_image" class="selector_image" src="//youtube.com/yts/img/yt_1200-vflhSIVnY.png">
<span class="imagecheckmark"></span>
</label>
<label id="labelimg" class="container imageinput" style="display:none;">
<input id="Radioimg" name="radio" class="radio" type="radio" value="og"/>
<img id="selector_og" class="selector_image" src="//youtube.com/yts/img/yt_1200-vflhSIVnY.png">
<span class="imagecheckmark"></span>
</label>
</fieldset>
You have display: none on your label, this element is wrapping your radio inputs so none of that will show up. If you remove that, checked is working fine.
Has anyone seen an example of selecting all the checkboxes without any javascript or jquery? If so, if anyone can show me an example or a site where this has been seen?
Thank you in advance
Although this is something you should probably be using JavaScript for (few people will have it disabled, and it's very simple to add a message with <noscript> telling people to turn it on), contrary to what others are saying, I believe it is possible with a bit of CSS magic.
Here I have two sets of checkboxes that appear identical to the end user. When the "check both boxes" checkbox is checked, the ones which are pre-checked are displayed. Otherwise, the first set is displayed. On the server end, check the status of the "check both boxes" checkbox to see which set should be ignored.
#bothChecked {
display: none;
}
#bothBox:checked ~ #bothChecked{
display: block;
}
#bothBox:checked ~ #bothUnchecked{
display: none;
}
<form>
<input type="checkbox" id="bothBox"> Check both boxes<br>
<div id="bothUnchecked">
<input type="checkbox"> Checkbox 1<br>
<input type="checkbox"> Checkbox 2
</div>
<div id="bothChecked">
<input type="checkbox" checked disabled> Checkbox 1<br>
<input type="checkbox" checked disabled> Checkbox 2
</div>
</form>
#spacer-gif was faster while I was making a Codepen for you. I can only repeat what he said. This is sooooo hacky that it hurts :D
But it was fun to make.
https://codepen.io/nemanjaglumac/pen/BVKNoM
<div class="container">
<input type="checkbox" id=trigger>
<label for="trigger">
<button class="button">Button</button>
</label>
<div class="checked">
<input type="checkbox" id="firstChecked" checked>
<label for="firstChecked">First</label>
<input type="checkbox" id="secondChecked" checked>
<label for="secondChecked">Second</label>
</div>
<div class="unchecked">
<input type="checkbox" id="firstChecked">
<label for="firstChecked">First</label>
<input type="checkbox" id="secondChecked">
<label for="secondChecked">Second</label>
</div>
</div>
Once again, if you want full control, use JS.
I'm trying to give label after button,but the button is not appearing.
Is is working in fiddle but not in my local code.
Please solve the issue.
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;width:100px;font-size:12px;float:left">
Default Template
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</label>
</span>
</div>
Simple solution.. Remove the width:100px;from the label or give it more pixels...
The problem is, that both elements (the text and the radio button) don't fit together inside a 100px element.. So by deleting it or making it wider, they will fit together.
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;font-size:12px;float:left">
Default Template
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</label>
</span>
</div>
Keep input field outside of the label tag,
Try following code,
<div style="float:left;padding-top:5px;">
<span class="newrdb">
<label for="all" style="padding-left:15px;padding-bottom:8px;font-size:12px;float:left;">
Default Template
</label>
<input type="radio" name="Template" id="all" value="Default Template" checked="">
</span>
</div>
I have some radio buttons and i would like them to be checked after i click their label.
this is my code before it has been rendered.
div class="btn-group-vertical max-width-100 btn-group-for-partial row col-xs-12" data-toggle="buttons">
#foreach (var x in #Model.dwom.Options)
{
<label for="#x"><input type="radio" name="elu.Answer" id="#x" value="#x"/>#x</label><br />
}
</div>
this is my code after it has been rendered.
<label for="Poinsettia">
<input type="radio" name="elu.Answer" id="Poinsettia" value="Poinsettia" />Poinsettia</label>
<br />
<label for="Mistletoe">
<input type="radio" name="elu.Answer" id="Mistletoe" value="Mistletoe" />Mistletoe</label>
<br />
<label for="Ivy">
<input type="radio" name="elu.Answer" id="Ivy" value="Ivy" />Ivy</label>
<br />
<label for="Holly">
<input type="radio" name="elu.Answer" id="Holly" value="Holly" />Holly</label>
<br />
now on my site it doesn't work for some reason, but in this jsFiddle it does: jsFiddle.
the weird thing is that you can see it being clicked, as in it gets that bevel they do before you release the click.
Hopefully someone here can help me in the right direction to get this working again.
Okay nevermind i was an idiot.
the solution was the data-toggle that my outside div had, it shouldn't have buttons inside it.
Basically im building a gallery, with pure css. When I press image1 it will check the checkbox1 and the div1 will appear. I have done that already, the problem is, if I press the image2 the div2 will appear, but if I press the image1 again the div1 will not appear because div2 is in front of it.
HTML:
<div class="gallery">
<label for="toggle1"><a>1</a></label>
<input id="toggle1" type="checkbox">
<label for="toggle2"><a>2</a></label>
<input id="toggle2" type="checkbox">
<label for="toggle3"><a>3</a></label>
<input id="toggle3" type="checkbox">
<label for="toggle4"><a>4</a></label>
<input id="toggle4" type="checkbox">
<label for="toggle5"><a>5</a></label>
<input id="toggle5" type="checkbox">
<label for="toggle6"><a>6</a></label>
<input id="toggle6" type="checkbox">
<label for="toggle7"><a>7</a></label>
<input id="toggle7" type="checkbox">
<label for="toggle8"><a>8</a></label>
<input id="toggle8" type="checkbox">
<div class="conteudo1">1</div>
<div class="conteudo2">2</div>
<div class="conteudo3">3</div>
<div class="conteudo4">4</div>
<div class="conteudo5">5</div>
<div class="conteudo6">6</div>
<div class="conteudo7">7</div>
<div class="conteudo8">8</div>
</div>
I will not post the css because I didnt found how I can indent the code automatically, but you can see it here: http://jsfiddle.net/blackice856/3vhCH/1/
Basically what I need is when checkbox1 is checked, uncheck all the other checkboxes, and reapeat that for all the remain checkboxes.
I never liked javascript much, but I just did this with it and It took me like 10 minutes lol, but I still want to know if there is any way of doing it.
Thanks for your time (:
Yes. You'll need to write some Javascript to uncheck the other boxes. HTML itself actually provides similar functionality with radio boxes, as mu is too short said