I've got a radio button list in the form of
<div data-toggle="buttons" style="margin: 5px 0 20px">
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="0"> 0</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="1"> 1</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="2"> 2</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="3"> 3</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="4"> 4</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="5"> 5</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="6"> 6</label>
<label class="btn grey active"><input type="radio" name="ResponseForm[nps]" value="7" checked=""> 7</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="8"> 8</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="9"> 9</label>
<label class="btn grey"><input type="radio" name="ResponseForm[nps]" value="10"> 10</label>
</div>
When I try to check if a radio is selected with
::canSeeOptionsIsSelected('form input[type=radio]', 1);
It is throwing an error:
Step I can see option is selected "form input[type=radio]",1
Fail Element located either by name, CSS or XPath element with 'selected option' was not found.
As I understand it is looking for a select tag, not a radio button. If it's not a proper way to check if a radio is selected, then what is?
Your selector seems to be malformed since you don't use the form tag in your HTML file. Maybe try an xpath like: //input[#type='radio'] in canSeeOptionsIsSelected() function
Related
I am trying to provide a block of multiple choice buttons to the user: five choices, plus an "other" dropdown with a list of 30+ more options. I want to return the value of the selection for the same form element. Currently, the buttons display correctly but selecting from the dropdown is not mutually exclusive to selecting from the first five choices.
<input type="radio" id="Image1_${Cat1}" name="Image1_Category" value="${Cat1}">
${Cat1}
</label>
<label class="btn btn-secondary">
<input type="radio" id="Image1_${Cat2}" name="Image1_Category" value="${Cat2}">
${Cat2}
</label>
<label class="btn btn-secondary">
<input type="radio" id="Image1_${Cat3}" name="Image1_Category" value="${Cat3}">
${Cat3}
</label>
<label class="btn btn-secondary">
<input type="radio" id="Image1_${Cat4}" name="Image1_Category" value="${Cat4}">
${Cat4}
</label>
<label class="btn btn-secondary">
<input type="radio" id="Image1_${Cat5}" name="Image1_Category" value="${Cat5}">
${Cat5}
</label>
<select class="btn btn-secondary form-control"><label>Other</label>
<option>Other</option>
<option>Option1</option>
<option>Option2</option>
</select>
</div>
</div>
How do I separate two radio button groups ? Each line have to be checked separately, see in the example below :
<div id="group1" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</div>
<div id="group2" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</div>
https://jsfiddle.net/vzn6x7z6/
Thanks
You need to separate your groups with <fieldset> , and also you need to wrap it in <form>, and finally to work as you want you need to change name for second group from name="option" to name="optionOne" or something.
updated jsFiddle
<form>
<fieldset>
<div id="group1" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton" name="options" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton" name="options" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton" name="options" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
<fieldset>
<div id="group2" class="btn-group" data-toggle="buttons">
<input id="emViewMacsButton2" name="options1" type="radio">
<label class="btn btn-primary">MAC</label>
<input id="emViewTagsButton2" name="options1" type="radio">
<label class="btn btn-primary">Tags</label>
<input id="emViewSettingsButton2" name="options1" type="radio">
<label class="btn btn-primary">Settings</label>
</div>
</fieldset>
</form>
Also match for attribute of label with input ID, and move input outside of label. Everything is updated in code above except for attributes.
Put them in 2 separate fieldsets instead of a div and it should work:
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</fieldset>
<fieldset>
<label class="btn btn-primary">
<input id="emViewMacsButton2" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton2" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton2" name="options" type="radio">Settings
</label>
</fieldset>
HI I am trying to draw a list of radio button using bootstrap 3.2, I have enclosed by buttons in a toolbar, I assumed this would draw the buttons next to each othe, with no gaps between the buttons.
Instead it draws a line of buttons with rounded edges with a gap between each button
My bowser is "Version 39.0.2171.65 Ubuntu 14.04 (64-bit)", so I assume that I have a modern layout engine. I assumed this would work 'out of the box'
There is a reference in my code to bootstrap.css
Have I missed something ?
Code is
<div class='btn-toolbar' role='toolbar' aria-label='...'>
<h2>Buttons</h2>
<div id='btn-group btn-group-justified' role='group' data-toggle='buttons' aria-label='...'>
<label class="btn btn-primary">
<input type='radio' id='layer1Button' autocomplete='off' name='options' >Fee
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer2Button' autocomplete='off' name='options' >Fie
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer3Button' autocomplete='off' name='options' >Foe
</label>
<label class='btn btn-primary'>
<input type='radio' id='layer4Button' autocomplete='off' name='options' >Foo
</label>
</div>
</div>
Try this:
Jsfiddle
<h2>Buttons</h2>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" id="layer1Button" autocomplete="off" name="options" > Fee
</label>
<label class="btn btn-primary">
<input type="radio" id="layer2Button" autocomplete="off" name="options" >Fie
</label>
<label class="btn btn-primary">
<input type="radio" id="layer3Button" autocomplete="off" name="options" >Foe
</label>
<label class="btn btn-primary">
<input type="radio" id="layer4Button" autocomplete="off" name="options" >Foo
</label>
</div>
In case #1 works, in case #2 it do not works. Check the code bellow:
<div class="container">
<div class="row">
<h1>Radio Group #1</h1>
<label class="radio-inline">
<input name="radioGroup" id="radio1" value="option1" type="radio"> 1
</label>
<label class="radio-inline">
<input name="radioGroup" id="radio2" value="option2" checked="checked" type="radio"> 2
</label>
<label class="radio-inline">
<input name="radioGroup" id="radio3" value="option3" type="radio"> 3
</label>
</div>
<div class="row">
<h1>Radio Group #2</h1>
<label for="year" class="control-label input-group">Year</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input name="year" value="2011" type="radio">2011
</label>
<label class="btn btn-default">
<input name="year" value="2012" type="radio">2012
</label>
<label class="btn btn-default">
<input name="year" value="2013" checked="checked" type="radio">2013
</label>
</div>
</div>
</div>
You can see it in action here: http://bootply.com/84165
Assuming you want a default button checked.
<div class="row">
<h1>Radio Group #2</h1>
<label for="year" class="control-label input-group">Year</label>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="year" value="2011">2011
</label>
<label class="btn btn-default">
<input type="radio" name="year" value="2012">2012
</label>
<label class="btn btn-default active">
<input type="radio" name="year" value="2013" checked="">2013
</label>
</div>
</div>
Add the active class to the button (label tag) you want defaulted and checked="" to its input tag so it gets submitted in the form by default.
A javascript fix to apply the 'active' class to all labels that are parents of checked inputs:
$(':input:checked').parent('.btn').addClass('active');
insert right after
$('.btn').button();
You have to use active in the label to make it work as mentioned above. But you can use checked="checked" and it will work too. It's not necessary but it's more legible and makes more sense as it is more html format compliance.
Use active class with label to make it auto select and use checked="" .
<label class="btn btn-primary active" value="regular" style="width:47%">
<input type="radio" name="service" checked="" > Regular </label>
<label class="btn btn-primary " value="express" style="width:46%">
<input type="radio" name="service"> Express </label>
In case you want to use bootstrap radio to check one of them depends on the result of your checked var in the .ts file.
component.html
<h1>Radio Group #1</h1>
<div class="btn-group btn-group-toggle" data-toggle="buttons" >
<label [ngClass]="checked ? 'active' : ''" class="btn btn-outline-secondary">
<input name="radio" id="radio1" value="option1" type="radio"> TRUE
</label>
<label [ngClass]="!checked ? 'active' : ''" class="btn btn-outline-secondary">
<input name="radio" id="radio2" value="option2" type="radio"> FALSE
</label>
</div>
component.ts file
#Component({
selector: '',
templateUrl: './.component.html',
styleUrls: ['./.component.css']
})
export class radioComponent implements OnInit {
checked = true;
}
I wonder what is the right use of with multiple checkboxes?
I have form style that uses the following scheme to create inline checkboxes:
<label class="checkbox inline" for="???">
<input type="checkbox" name="highest_grade[]" value="1">1
</label>
<label class="checkbox inline" for="???">
<input type="checkbox" name="highest_grade[]" value="2">2
</label>
<label class="checkbox inline" for="???">
<input type="checkbox" name="highest_grade[]" value="3">3
</label>
It works fine, but I wonder what should I add as "for" attribute for labels? I can also leave it blank, but I would like to know what is the good practice.
Give your inputs unique ids and reference them from your label tags:
<label class="checkbox inline" for="option1">
<input type="checkbox" name="highest_grade[]" value="1" id="option1"> 1
</label>
<label class="checkbox inline" for="option2">
<input type="checkbox" name="highest_grade[]" value="2" id="option2"> 2
</label>
<label class="checkbox inline" for="option3">
<input type="checkbox" name="highest_grade[]" value="3" id="option3"> 3
</label>