I've an HTML form that I've put together...
There is a question "Can you attend?" with a "Yes" and "No" checkbox.
Obviously who submits the form will either attend or not, so I would like for the form to only allow one checkbox to be selected of the two.
Here's the HTML:
<p>Can you attend?</p>
<label>
<input type="checkbox" name="attendance" value="checkbox" id="Yes" />
Yes</label>
<label>
<input type="checkbox" name="attendance" value="checkbox" id="No" />
No</label>
What does my code need to be? I'm guessing some JavaScript?
Thank you
And thus the radio was born :-)
<p>Can you attend?</p>
<label>
<input type="radio" name="attendance" value="checkbox" id="Yes" />
Yes</label>
<label>
<input type="radio" name="attendance" value="checkbox" id="No" />
No</label>
Demo: http://jsbin.com/oreped/
Related
Is it possible to have multiple radio button groups in a single form? Usually selecting one button deselects the previous, I just need to have one of a group deselected.
<form>
<fieldset id="group1">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
<fieldset id="group2">
<input type="radio" value="">
<input type="radio" value="">
<input type="radio" value="">
</fieldset>
</form>
Set equal name attributes to create a group;
<form>
<fieldset id="group1">
<input type="radio" name="group1">value1</input>
<input type="radio" name="group1">value2</input>
</fieldset>
<fieldset id="group2">
<input type="radio" name="group2">value1</input>
<input type="radio" name="group2">value2</input>
<input type="radio" name="group2">value3</input>
</fieldset>
</form>
This is very simple you need to keep different names of every radio input group.
<input type="radio" name="price">Thousand<br>
<input type="radio" name="price">Lakh<br>
<input type="radio" name="price">Crore
</br><hr>
<input type="radio" name="gender">Male<br>
<input type="radio" name="gender">Female<br>
<input type="radio" name="gender">Other
Just do one thing,
We need to set the name property for the same types. for eg.
Try below:
<form>
<div id="group1">
<input type="radio" value="val1" name="group1">
<input type="radio" value="val2" name="group1">
</div>
</form>
And also we can do it in angular1,angular 2 or in jquery also.
<div *ngFor="let option of question.options; index as j">
<input type="radio" name="option{{j}}" value="option{{j}}" (click)="checkAnswer(j+1)">{{option}}
</div>
in input field make name same
like
<input type="radio" name="option" value="option1">
<input type="radio" name="option" value="option2" >
<input type="radio" name="option" value="option3" >
<input type="radio" name="option" value="option3" >
To create a group of inputs you can create a custom html element
window.customElements.define('radio-group', RadioGroup);
https://gist.github.com/robdodson/85deb2f821f9beb2ed1ce049f6a6ed47
to keep selected option in each group, you need to add name attribute to inputs in group, if you not add it then all is one group.
I have a problem with checkboxes:
I have 2 menu that open 2 type of checkbox and I would like to have one all checked and the other not-checked when I refresh the page. this is the code:
<div id="Scena" class="tabcontent" onmousedown="if (event.preventDefault) event.preventDefault()">
<input type="checkbox" checked="checked" style="cursor:hand;" onclick="presenter.toggleInstanceVisibilityByName('Parete_frontale',true);"> Parete_frontale </input>
<input type="checkbox" checked="checked" style="cursor:hand;margin-left:50px;" onclick="presenter.toggleInstanceVisibilityByName('Parete_destra', true);"> Parete_destra </input>
<input type="checkbox" checked="checked" style="cursor:hand;margin-left:50px;" onclick="presenter.toggleInstanceVisibilityByName('Parete_sinistra', true);"> Parete_sinistra </input>
<input type="checkbox" checked="checked" style="cursor:hand;margin-left:50px;" onclick="presenter.toggleInstanceVisibilityByName('Parete_p1', true);presenter.toggleInstanceVisibilityByName('Parete_p2', true);presenter.toggleInstanceVisibilityByName('Parete_p3', true);"> Parete_porta </input><br/>
</div>
<div id="Indagini" class="tabcontent">
<input type="checkbox" style="cursor:hand;" onclick="presenter.changeTexture('Parete_p2','back01_cervo.png');setInfoSofia(4);"> Image enhancement </input>
<input type="checkbox" style="cursor:hand;" onclick="presenter.changeTexture('Parete_destra', 'destra_fluo.png');setInfoSofia(5);"> Analisi di Fluorescenza (LIF) </input>
<input type="checkbox" style="cursor:hand;" onclick="setInfoSofia(6)"> Efflorescenze saline </input>
<input type="checkbox" style="cursor:hand;" onclick="presenter.toggleSpotVisibility(HOP_ALL, true); presenter.enableOnHover(!presenter.isOnHoverEnabled()); hotspotSwitch();"> Indagini di caratterizzazione dei materiali </input>
</div>
I want all children of the div with id Scena to be checked and those of the div with id Indagini to be unchecked.
Can anyone help me?
You can use "checked" option.So, by default all the Scena checkboxes will be checked.
<input type="checkbox" checkedstyle="cursor:hand;" onclick="" checked> Image enhancement
I am working on a product configurator with interdependencies and many options. I'm looking for a solution how to restore the selected state for the form without saving data on the server.
My idea:
the customer makes his choice with checkboxes and radio button on
the website (simple example: http://jsfiddle.net/benroe/6JRAm/5/)
customer print out the custom product with a short number at the
bottom ("configuration number")
the employee in the store types in the "configuration number" on the
website and same selected state (checkbox and radio button) are selected
But how to generate a short number for every possible unique states?
Simple example for the form:
<h1>Product Configurator</h1>
<form>
<p>
<label for="element_3">1: Size</label> <span><input id="element_3_1" name="element_3" class="element radio" type="radio" value="1"> <label class="choice" for="element_3_1">1m</label> <input id="element_3_2" name="element_3" class="element radio" type="radio" value="2"> <label class="choice" for="element_3_2">5m</label> <input id="element_3_3" name="element_3" class="element radio" type="radio" value="3"> <label class="choice" for="element_3_3">10m</label></span>
</p>
<p>
<label for="element_1">2: Color</label> <span><input id="element_1_1" name="element_1" class="element radio" type="radio" value="1"> <label class="choice" for="element_1_1">Green</label> <input id="element_1_2" name="element_1" class="element radio" type="radio" value="2"> <label class="choice" for="element_1_2">Blue</label> <input id="element_1_3" name="element_1" class="element radio" type="radio" value="3"> <label class="choice" for="element_1_3">Black</label></span>
</p>
<p>
<label for="element_2">3: Extra</label> <span><input id="element_2_1" name="element_2_1" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_1">Special 1</label> <input id="element_2_2" name="element_2_2" class="element checkbox" type="checkbox" value="1"> <label class="choice" for="element_2_2">Special 2</label></span>
</p>
<p><input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"></p>
</form>
<p>Configuration Number: <input type="text"></p>
Something like this? but adding the customer id:
http://jsfiddle.net/6JRAm/23/
$('#saveForm').click(function() {
var configuration='Clien_ID-' + $('input[type=radio]:checked,input[type=checkbox]:checked').map(function() {
return $(this).val();
}).get().join('-');
alert(configuration);
});
So I assume this is something I'm doing flagrantly wrong. It is soo slow in ie there must be something fundamentally wrong with this.
Le HTML
<div id='mother'>
<div id="radio">
<input type="radio" id="radio1" name="radio" />
<label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" />
<label for="radio2">Choice 2</label>
</div>
<div id="radioTwa">
<input type="radio" id="radioTwa1" name="radioTwa" />
<label for="radioTwa1">Choice 1</label>
<input type="radio" id="radioTwa2" name="radioTwa" checked="checked" />
<label for="radioTwa2">Choice 2</label>
</div>
<div id="check">
<input type="checkbox" id="check1" name="check" />
<label for="check1">Choice 1</label>
<input type="checkbox" id="check2" name="check" checked="checked" />
<label for="check2">Choice 2</label>
</div>
</div>
Le JQuery/JQuery UI
var mother = $('#mother');
mother.find('#radio').buttonset();
mother.find('#radioTwa').buttonset();
mother.find('#check').buttonset();
or
var mother = $('#mother');
$('#radio', mother).buttonset();
$('#radioTwa', mother).buttonset();
$('#check', mother).buttonset();
Both of these will bring IE 8 to it's knees and make it cry. To nip some things in the bud I am using the context of mother on purpose. I do not have a unique ID to each radio box, I planned to select them using context, because of the number 'mother' type divs that are on the page though each mother div element I am using only has about 8 or 9 elements within it. Is there no way to select using context in IE 8 that is quick enough to not grind it to a halt?
How many buttons do you have total? There seems to be a few compliants about slow buttonssets on stackoverlow. Also I found bugs.jqueryui.com/ticket/5454 – Nal
I have a basic quiz/survey type application I'm working on, and I'd like to give the user a prompt before they submit if they haven't answered all the questions. All the questions are multiple choice using radio buttons:
<div class="question">
Q1: What is the second letter of the alphabet?
<div class="choices">
<input type="radio" name="question_1" value="1" /> A
<input type="radio" name="question_1" value="2" /> B
<input type="radio" name="question_1" value="3" /> C
</div>
</div>
<div class="question">
Q2: Which out of these is a berry?
<div class="choices">
<input type="radio" name="question_2" value="1" /> Apples
<input type="radio" name="question_2" value="2" /> Bananas
<input type="radio" name="question_2" value="3" /> Carrots
</div>
</div>
<div class="question"> ...etc
How do you find which groups haven't got an option ticked? Or at least, if there are any which haven't been answered?
jQuery is ok, and even preferred.
Ah, I figured it out:
$('div.question:not(:has(:radio:checked))')