I have AngularJs code where i want a radio button to be automatically selected and another radio button unselected whenever a user selects a checkbox and then a specific option from a dropdown.
So from the picture above, if a user selects the pacing checkbox then selects evenly from the dropdown, the 'Specific timezone' radio button should be automatically selected. Depending of the order of the button selections, there is also times when if pacing and evenly are selected first then the Dayparting checkbox is selected, the 'Users timezone' radio button will be selected and evenly will no longer be selected in the dropdown
<div class="radio radio-primary radio-specific">
<input name="timezone" id="specific_time" type="radio" checked="checked"
ng-click="specificTimezone = true;$ctrl.specificTimezoneRadioClicked()">
<label for="specific_time">Specific timezone</label>
</div>
<input ng-if="!$ctrl.isDeliveryPacingFeatureEnabled"
name="timezone" id="user_time" type="radio" checked="checked"
value="viewer"
ng-model="$ctrl.deal.deal_settings.dayparting.timezone"
ng-click="specificTimezone = false">
I use the below line to disable the 'User timezone' radio button
ng-disabled="$ctrl.pacingEnabled() && $ctrl.evenlyPacingEnabled()"
What you are looking for is ng-change You can read the documentation here.
<select type="text" class="form-control" style="width:25%" ng-model="selectedVal" ng-change="changeOption()">
<option ng-repeat="lookup in optionsList" ng-value="lookup">
{{lookup}}
</option>
</select>
Hope this jsfiddle link will give you a head start.
Related
I'm using Bootstrap 3 and I have a radio button like this:
<input type="radio" name="attr_var" class="minimal">
Add To Attribute
Users can properly click on it for checking it, but it does not unchecked when it's re-clicked.
Basically when it's checked, users can be uncheck it when they re-click on it but this does not workout.
So how to fix this?
Radio buttons are distinct from checkboxes. The user can change options between a set of radio buttons, but it cannot be deselected.
You can refer to this answer for a better explanation as to Why is it impossible to deselect HTML "radio" inputs?
PS. This applies to native HTML radio buttons. You can still use a checkbox for this purpose, or create your own buttons with CSS and Javascript that behave the same way.
Radio buttons can't be unchecked, I think you just need a checkbox which you can check or uncheck.
Please find the reference here:https://getbootstrap.com/docs/5.0/forms/checks-radios/
<input type="checkbox" name="attr_var" class="minimal">
Add To Attribute
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>
If you want to use just single option to be check or uncheck, use Checkbox instead of Radio button.
For example,
<input type="checkbox" name="attr_var" class="minimal"> Add To Attribute
Default tab indexing is NOT working with radio buttons, working fine with any other HTML component e.g. checkbox, textbox etc.
Below basic code not working for radio button tab index but working fine with checkbox.
<div class="box">
<input type="radio" name="rdgroup">H
<input type="radio" name="rdgroup">E
<input type="radio" name="rdgroup">L
</div>
<div class="box">
<input type="checkbox" name="ckgroup">W
<input type="checkbox" name="ckgroup">O
<input type="checkbox" name="ckgroup">R
</div>
https://jsfiddle.net/wtyg7cLz/
Thank you :)
Essentially a radio button is a group that functions as a single element since it retains only a single value. Tabbing to a radio group will bring you to the first item and then using the arrow keys you navigate within the group....
When you assign same name to the ratio buttons, it treats you like a one control. However when you don't select anyone you can have a focus on first one and then use arrow button to select the one you want to.
Focus can move to a radio group via: The Tab key An Access Key or
mnemonic targeting the label Activation of the label (through
Assistive Technology mechanism)
The Tab key moves focus between radio button groups and other widgets.
When focus is on the group and when no radio button is selected: Tab
key press moves focus to the first radio button in the group, but does
not select the radio button. Shift+Tab key press moves focus to the
last radio button in the group, but does not select the radio button.
Source: https://www.w3.org/wiki/RadioButton
As #Just Code said:
When you assign same name to the ratio buttons, it treats you like a one control. However when you don't select anyone you can have a focus on first one and then use arrow button to select the one you want to.
For radio buttons as a group if they have the same name then changing focus will work or navigate with arrow keys like (right, left, up, down).that is the default behavior of radio buttons, it is better to leave it as default. If you prefer tab control then i guess you have to implement it with javascript, because if you give them different name user can select all different radio buttons
enter code here
<div class="box">
<input type="radio" name="rdgroup" tabindex="1">H
<input type="radio" name="rdgroup" tabindex="2">E
<input type="radio" name="rdgroup" tabindex="3">L
</div>
<div class="box">
<input type="checkbox" name="ckgroup">W
<input type="checkbox" name="ckgroup">O
<input type="checkbox" name="ckgroup">R
</div>
you could use the tabindex attribute to get a workaround after the first radio button element gets focused the user can then use the arrow keys (default) to select the desired option.
kindly check the below link for more details.
https://www.w3schools.com/tags/att_global_tabindex.asp
I'm trying to find out what my form returns from the radio buttons?
I am trying to get it to return back one of two options in my form.
<fieldset id="questRewardType">
<input id="questRewardType" type="radio" name="questRewardType" value="0" checked><font color="#FFFFFF"> Item</font>
<br>
<input id="questRewardType" type="radio" name="questRewardType" value="1"><font color="#FFFFFF"> Currency</font>
</fieldset>
if I was to select the radio button Currency that should return back "Currency"? Am I correct in thinking this?
The value for a radio button set is determined by the value attribute of the checked radio button.
The label (which should be marked up with label not font), is used to tell the user what the radio button means.
I have two radio buttons on form for user to click just one of them ..
How can I set the another radio button value onclick action of the 1st radio action ?
<input type="radio" id="Male" onclick= " ">
<input type="radio" id="AltMale" >
I know some will ask why i am not using asp.net html controls and others will say that I should use asp.net controls, but my question is about how to do this using plain old html controls.
If I have the following:
<INPUT runat="server" type="radio" name="radio" id="radio0">Radio Button 0
<br>
<INPUT runat="server" type="radio" name="radio" id="radio1">Radio Button 1
where the user selects one of these radio buttons, so it should be a client side selection. Is it possible for me (asp.net at the server) to determine which radio button has been selected when the user submits the form?
I need the server to be able to determine this, so it can do an action based on the radio button selected.
I don't know asp.net but normally you would add a value to your radio buttons.
<input runat="server" type="radio" name="radio" id="radio0" value="0"> Radio Button 0
<br>
<input runat="server" type="radio" name="radio" id="radio1" value="1"> Radio Button 1
And submitting the form would return the selected radio button value for the name attribute parameter (in this case you named it radio).
You can determine which radio button has been selected server-side using the .Checked property.
radio0.Checked;