I am wondering how can I use Radio button as a toggle in Angular2.
What I need is if Radio button value is changes I want to get that value without creating a form.
Any help please.
[edit]:
I did:
<div class="form-group">
<label for="gender">Gender</label><br>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female<br>
</div>
in a form and getting value of gender in a form deails. But I dont want to use form for this.
in your component
public gender = [
'male',
'female'
];
onGenderChange(e) {
console.log(e);
}
in your html
<div *ngFor="let value of gender">
<input (change)="onGenderChange($event.target.value)" type="radio" name="gender" value="{{ value }}">{{ value }}
</div>
Related
I have 3 radiobuttons. I want they act like radiobuttons : if the user click one, the other can't be clicked. But somehow my buttons are acting like checkboxes, the user can select all 3. Here is my code, what am i missing ? Thanks !
<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status1" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status2" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label></div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status3" data-label="Option 3" data-mask="radiobutton" value="3"><label class="radio-label">Option 3</label>
</div>
Here is an image showing the problem. I DON'T USE W3Schools as a learning resource, i just used their HTML editor to show the example.
All the radio buttons in a group must have the same value for the name attribute. That's what makes them mutually exclusive.
Here's the documentation for <input type='radio'> which includes:
The "name" setting is an important attribute of radio buttons, as it
identifies which group a radio button belongs to. Because groups of
radio buttons act as a unit, you must specify a common name for all
related radio buttons. When two or more radio buttons share a name,
selecting one of the buttons will unselect all of the others with the
same name. If you have more than one group of radio buttons on a
single page, the buttons in different groups must have different
"name" attributes.
Radio buttons are grouped together using the name attribute. give them the same name.
<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label>
</div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status" data-label="Option 3" data-mask="radiobutton" value="3">
<label class="radio-label">Option 3</label>
</div>
Below code is html produced from opencart 2
No radio button is selected when loading page.
How can i have selected the Value="2" as default checked. (javascript or CSS)
<div id="payment-custom-field1" class="form-group custom-field" data-sort="0">
<label class="control-label">Invoice</label>
<div id="input-payment-custom-field1">
<div class="radio">
<label>
<input type="radio" value="2" name="custom_field[1]">
Receipt
</label>
</div>
<div class="radio">
<label>
<input type="radio" value="1" name="custom_field[1]">
Invoice
</label>
</div>
</div>
</div>
Solution with javascript
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
<input type="radio" id="sample" value="2" name="custom_field[1]">
Receipt
</label>
Using javascript:
document.getElementById("sample").checked = true;
Using html:
You can simply add checked attribute to your html element
Using the element name:
(function() {
document.getElementsByName("custom_field[1]")[0].checked=true;
})();
https://jsfiddle.net/pandiyancool/vb73q59w/
You can simply add checked attribute
<input type="radio" value="2" name="custom_field[1]" checked>
The solution with javascript was the below code:
document.getElementsByName("custom_field[1]")[0].checked=true;
Thank you Pandiyan Cool
I am trying to disable other checkboxes on selection of one checkbox and enable again if this has again been de-selected.Below is a snippet of code I found that worked during an example fiddle for a standard checkbox but I have not been able to replicate this for a checkboxfor, can someone please recommend the changes I need to make in order for this to work in a checkboxfor?
<script>
$('#chkItems').change(function () {
$(this).siblings('#chkItems').prop('disabled', this.checked)
});
</script>
And below is my checkboxfor where I am calling this
#Html.CheckBoxFor(modelItem => item.IsDisplayImage, new { id = "chkItems" })
You can use this code if want to persist using checkboxes otherwise its better to use radio button instead
HTML
<label class="checkbox-inline check">
<input type="checkbox" name="skills" id="radio" value="1"> 1
</label>
<label class="checkbox-inline check">
<input type="checkbox" name="skills" value="2"> 2
</label>
<label class="checkbox-inline check">
<input type="checkbox" name="skills" value="3"> 3
</label>
JS:
$('.check input:checkbox').click(function() {
$('.check input:checkbox').not(this).prop('checked', false);
});
Check this jsfiddle for the demo
You can use radio buttons as :
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Okey. For example you have model ForRadioButtonsModel like
public class ForRadioButtonsModel
{
public int Id { get; set; }
public bool IsDisplayImage { get; set; }
}
On View You pass Collection of this models or model that contains this collection
return View((List<ForRadioButtonsModel>) collection);
Than In view you can do next to create RadioGroup
#foreach (var item in Model) <-- Model is of type List<ForRadioButtonsModel>
{
#Html.RadioButtonFor(m => item.IsDisplayImage, item.IsDisplayImage)
}
This will render next HTML
<input checked="checked" id="item_IsDisplayImage" name="item.IsDisplayImage" type="radio" value="True">
<input checked="checked" id="item_IsDisplayImage" name="item.IsDisplayImage" type="radio" value="False">
So You will have radioButtons with same name, but with different values
I am passing the selected value to the jquery from jquery in passing to the url to the next page, this is how my check box looks like:
<label class="checkbox">
<input type="checkbox" value="male" id="gender" name="gender" /> Male
</label>
<label class="checkbox" style="margin:-25px 0 0 100px">
<input type="checkbox" value="female" id="gender" name="gender" /> Female
</label>
<label class="checkbox" style="margin:-20px 0 0 205px">
<input checked type="checkbox" value="all" id="gender" name="gender"> All
</label>
my jquery:
var gender = $('input[name=gender]:checked').map(function(){
return $(this).val();
}).get();
alert(gender);
My problem is for example :
When I select the gender male it passes to jquery as 'male,' but my problem is here when I unchecked the male and check the female then it passes to jquery as female,male, it is not passing the value which is selected now it is passing the value with pervious one, can any one guide me how to solve this.
Use jQuery change event as follows
$('input[name=gender]').on('change',function(){
var gender = $('input[name=gender]:checked').map(function(){
return $(this).val();
}).get();
alert(gender);
});
DEMO
First of all: an id must be unique, as soon as there are two elements with same id (like "gender"), results are arbitrary random.
And: use radio button and you're done w/o any JS or jQuery:
<label class="checkbox">
<input type="radio" value="male" id="gender_m" name="gender" /> Male
</label>
<label class="checkbox" style="margin:-25px 0 0 100px">
<input type="radio" value="female" id="gender_f" name="gender" /> Female
</label>
<label class="checkbox" style="margin:-20px 0 0 205px">
<input checked type="radio" value="all" id="gender_a" name="gender"> All
</label>
And if you want the radios look like check boxes, see this post
if you have this code:
<form name="thing">
<label>Are you a student?</label>
<input name="choice" type="radio" value = "yes" checked />yes
<input name="choice" type="radio" value="no" />no
</form>
then you can select the radios like so:
document.thing.choice[i].value
And then I assumed that in this case:
<form name="thing">
<label name ="yes_no">Are you a student?
<input name="choice" type="radio" value = "yes" checked />yes
<input name="choice" type="radio" value="no" />no
</label>
</form>
then you could select the radio values like so:
document.thing.yes_no.choice[i].value
why does this work for form and not label? Is it because form is an object in the DOM and label is not?
Also, is the name attribute valid for form still? Or should one only use ID's...