I'm trying to make a work a simple task without lucky, I'm trying to check an input radio by clicking on a button. Each input radio as their button. How do you achieve that in angular way?
<button class="btn btn-primary">
<input type="radio" ng-model="color" value="1">
</button>
<button class="btn btn-primary">
<input type="radio" ng-model="color" value="2">
</button>
<button class="btn btn-primary">
<input type="radio" ng-model="color" value="3">
</button>
How you can see I put the input inside the element button, if you have different thoughts please correct me.
Set the associated ng-model equal to the value of the radio you want selected:
<button class="btn btn-primary" ng-click="color = 1">
<input type="radio" name="radioGroup" ng-model="color" value="1">
</button>
Use <label> and style it as button:
<label class="btn btn-default"> Button 1
<input type="radio" ng-model="color" value="1">
</label>
<label class="btn btn-default"> Button 2
<input type="radio" ng-model="color" value="2">
</label>
and add css to hide the input[type="radio"].
Not everything needs Angular.
Related
I am trying to change the Bootstrap v5 class of the buttons when they are clicked. They all have a same background-color constant (#cd6133). However when clicked i'd like then to have the following colors; and also radio button to be hidden and bootstrap button to be visible with provided colors
btn-default (#cd6133)
Entry (#05c46b)
Proffessional (#2c2c54)
Excutive (#227093)
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="change" id="entry" value="1" autocomplete="off">Entry
</label>
<label class="btn btn-default">
<input type="radio" name="change" id="proffessional" value="2" autocomplete="off">Proffessional
</label>
<label class="btn btn-default">
<input type="radio" name="change" id="excutive" value="3" autocomplete="off">Excutive
</label>
</div>
<script>
$("#cd6133").on("click", function() {
var classArr = ["#05c46b", "#2c2c54", "#227093"];
$("#cd6133").removeClass(classArr.toString().replace(/,/g," "));
var value = $(this).find("input[name='change']").val();
$(this).addClass(classArr[value - 1]);
});
</script>
I had a drop-down for gender single-select: Male/Female
However, our designer wanted to spice it up and turn drop-down into buttons like this:
How can I implement these buttons in Javascript/React where clicking on one button highlights it and then it unhighlights the opposite button?
I learned that Bootstrap has this functionality as long as you include the data-toggle="buttons" in the top div.
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" name="options" autocomplete="off" checked> Option A
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" autocomplete="off"> Option B
</label>
<label class="btn btn-primary active">
<input type="checkbox" name="options" autocomplete="off" checked> Option C
</label>
</div>
I have a radio button group like this in my angular 4.1.3 app:
<form #f="ngForm">
<label class="btn btn-success">
<input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
</label>
<label class="btn btn-success">
<input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
</label>
<label class="btn btn-success">
<input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
</label>
</form>
This works well. However, I would like to style the label (including the button) when the corresponding radio button is checked.
I can't see any useful attribute:
(first one is checked)
I tired the obvious:
input[type=radio]:checked {
background: red;
}
That doesn't work...
Any ideas how I could select the checked button in CSS?
Unfortunately you cannot style parent using child :checked pseudo-selector.
To get this working i recommend use model value, e.g.:
<form #f="ngForm">
<label class="btn btn-success" [ngClass]="{selected: myFood==='beef'">
<input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
</label>
<label class="btn btn-success" [ngClass]="{selected: myFood==='lamb'">
<input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
</label>
<label class="btn btn-success" [ngClass]="{selected: myFood==='fish'">
<input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
</label>
</form>
I have a form that will be presented multiple times dynamically with php depending on the amount of data from the database.
For our example let's say that we have 2 objects and by that we have 2 similar forms. for example:
<form name="form1">
<li class="list-group-item">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" class="btn btn-danger" value="no" id="option1" autocomplete="off"> Not going
</label>
<label class="btn btn-default">
<input type="radio" name="options" class="btn btn-success" value="maybe" id="option2" autocomplete="off"> Maybe
</label>
<label class="btn btn-default">
<input type="radio" name="options" class="btn btn-success" value="going" id="option3" autocomplete="off"> Going
</label>
</div>
</li>
</form>
My current jquery code is:
$(document).ready(function() {
$("input:radio").change(function(){
var form = $(this);
var form1 = $('input:radio[name=options]:checked').val();
var form2 = $('input:radio[name=options2]:checked').val();
console.log("option 1:" + form1);
console.log("option 2:" + form2);
});
});
as you can see I am creating a new var to be assigned with each form value.
I am looking for a build to build this dynamically based on the amount of forms created without having to create a var for each form hardcoded.
Thanks,
Nimi
I am have some trouble with setting the value of a hiddenfield with a boostrap radio button. here is the button group with the radio buttons and the hiddenfield.
<div class="myRow">
<div class="smallCol">
<div class="btn-group hiddenRFIDValue" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="alwaysRFID" autocomplete="off">
Always
</label>
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="neverRFID" autocomplete="off">
Never
</label>
<label class="btn btn-default">
<input type="radio" class="btn" name="options" id="sometimesRFID" autocomplete="off">
Sometimes
</label>
</div>
</div>
</div>
</div>
<asp:HiddenField ID="hiddenRFIDValue" runat="server" />
Here is the script that i am trying to set the value with.
<script>
$(".hiddenRFIDValue .btn").click(function () {
// whenever a button is clicked, set the hidden helper
$("#hiddenRFIDValue").val($(this).text());
});
</script>
Hope one of you can help with it. Thanks
I fixed it! when the html is generated it changed the id of the hidden field so the scipt needed to look like this.
<script>
$(".hiddenRFIDValue .btn").click(function () {
$("#MainContent_hiddenRFIDValue").val($(this).text());
});
</script>