Develop Reference

HTML onclick="" doesn't work with radio button

I'm making a flask website with bootstrap styling and I have a form with some radio style buttons (made with <input> html tag). I've been trying to call a js function through onclick="" but for me it only seems to work with real buttons (<button> tags). Here's my code.
<label id="multiBot" class="bsstyle" data-toggle="collapse" href=".multi-collapse">
<input type="checkbox" name="multis" checked autocomplete="off" id="mult" value="Mults" onchange="canvititol()"> Text
</label>

Okay, I found that I can make it work just by changing onclick="" for onchange="".

How to select an element having SELECT OPTION tags from Dropdown?

I am using WEBDRIVERIO framework. I have a dropdown in this html syntax. I tried to expand it using ID=question-3
After that I tried all the options using SELECT by options, values, text. But as it is obviously not SELECT DROPDOWN, none worked. I tried to click the locator based on the input or label option, but getting "element not visible" error message.
<div id="question-3" class="question ">
<div class="single-dropdown">
<input type="text" name="input-3" class="js-single-selection" placeholder="gender" data-question-id="3" data-index="3" readonly="" style="width: 77px;">
<div class="single-select-container" style="display: none;">
<div class="single-select-item" data-image="">
<label for="option-0-3" data-open="exampleModal1" class="option-0-3-modal">man</label>
<input type="checkbox" id="option-0-3" data-answer-type="single" data-question-id="3" value="man" data-index="3">
</div>
<div class="single-select-item checked" data-image="">
<label for="option-1-3" data-open="exampleModal1" class="option-1-3-modal">woman</label>
<input type="checkbox" id="option-1-3" data-answer-type="single" data-question-id="3" value="woman" data-index="3">
</div>
</div>
</div>
.</div>

Since html shows an input tag. I would suggest to :
1. type the value in that input box (placeholder="gender")
2. wait for options to appear (Label tag)
3. click the appeared item.(Appeared label)
Also if your scenario fails please provide stack trace for the failure.

I suggest clicking the Select Item (the input in this case), then implementing a wait (See docs: http://webdriver.io/api/utility/waitForVisible.html). And then clicking the dropdown item after you have waited for it to be visible on the screen. Like so...
browser.click(selectItem);
browser.waitForVisible(dropdownItem);
browser.click(dropdownItem);

Bootstrap checkbox/radio buttons do not change <input> value

The JavaScript page for Bootstrap shows some nice use of buttons to style checkboxes and radio fields. For example, for a checkbox, I might write
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox"> Option 1
</label>
</div>
However, the library doesn't actually change the value of the underlying <input> field -- it just changes whether the <label> field has class active. I would have expected it to change the checked attribute on the checkbox. Apparently I don't just have it misconfigured -- this is the way the examples on the Bootstrap site work.
Is this actually expected behavior? If so, it seems fairly useless, as people are going to want to use the checkbox field. If not, how do I properly configure Bootstrap checkboxes/radio buttons?

The checked attribute on the input isn't modified because that isn't what changes when a checkbox input is checked -- the checked DOM property is what changes (true or false), and Bootstrap handles this properly (you can inspect the element in Firebug and see the DOM property change when you toggle them). The checked attribute is only used to determine default value when the DOM is initially rendered.
If you ever happen to be doing any js/jQuery with checkboxes/radios, remember this! If you need to programatically check a checkbox or radio button, $('input').attr('checked', 'checked'); will not get the job done. $('input').prop('checked', true); is what you need.
This isn't special behavior for Bootstrap buttons, this is how all checkbox/radios work.
Edit: Firebug screenshot
Edit 2: Added text from the comments, as it seems to be helpful.

It looks like you are missing a call to "activate" the btn-group (documentation). Here is a demo of this working:
<form id='testForm'>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name='Option' value='1' />Option 1</label>
</div>
</form>
<button class='btn' id='actionSubmit'>Submit</button>
<script>
$('#actionSubmit').on('click', function (e) {
e.preventDefault();
alert($('#testForm').serialize());
});
$('.btn-group').button();
</script>

I am doing it like this for MVC.NET in case anyone needs it:
#{
var removeSelected = Model.Remove == true ? "active" : "";
var buttonText = Model.Remove == true ? "Add" : "Remove";
}
#Html.HiddenFor(model => model.Remove)
<div class="editor-field">
<div class="btn-group" data-toggle="buttons-checkbox">
<button type="button" id="RemoveButton" class="btn btn-primary #removeSelected" onclick="toggle();">#buttonText</button>
</div
</div>
function toggle() {
var value = $("#Remove").val();
if (value == "False") {
$("#Remove").val("True");
$("#RemoveButton").text("Add");
}
else {
$("#Remove").val("False");
$("#RemoveButton").text("Remove");
}
}
And finally don't forget to add the bootstrap js refence.

Bootstrap 3 radio button correct syntax

So I have been in the process of migrating my current project from Bootstrap 2.3 to Bootstrap 3 which has had some major structural changes particularly to due with radio buttons. Currently I have
HTML:
<div 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>
Script Code:
$('#emViewMacsButton').on('click',emViewMacs());
$('#emViewTagsButton').on('click',emViewTags());
$('#emViewSettingsButton').on('click',emViewSettings());
My problem lies in that I have setup my program that each of the different radio buttons must access a different function to display table data. The .on('click') function returns nothing. I've also tried $('input[name=options]') but the active attribute isn't set for any of the radio buttons on the returned piece of HTML .
What would be the correct structure for this ?

http://jsbin.com/uwezip/1/edit
when passing a function ( myFunction() ) into another function callback, just remove the ()
$(function(){ // DOM is now ready to be manipulated
$('#emViewMacsButton').on('change',emViewMacs);
$('#emViewTagsButton').on('change',emViewTags);
$('#emViewSettingsButton').on('change',emViewSettings);
});

check html checkbox using a button

I'm struggling to find a solution for this anywhere on Google, maybe i'm searching incorrectly but thought I would come and ask the ever trustworthy members of StackOverflow.
I'm wanting to use an html button to check an html check box. There reason I don't want to use the check box will be purely for accessibility reasons because the application i'm developing will be on a terminal and used as via a touch-screen so an HTML check box is too small.
The only issue is that the list of check box's is dynamic as it is populated using an SQL query. Obviously however I can do the same for creating HTML buttons.
Im guessing it will require JavaScript (which I'm perfectly happy using now as I'm finding a lot of the functionality I need in this application needs JavaScript) to do this functionality.
So to clarify: I want to click on a button, say it has a value of "Fin Rot" and that checks the check box with the value "Fin Rot". And then if I clicked another button, say it has a value of "Ich" then it also checks the check box with the value "Ich"

While you can use a button and JavaScript for this, might I suggest a much simpler approach? Just use a <label> that's designed just for this, and style it like a button, for example:
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<label for="finRot">Some text here, could be "Fin Rot"</label>
or (if you don't want to use id on checkbox and for on label):
<label>
<input type="checkbox" name="something" value="Fin Rot">
Some text here, could be "Fin Rot"
</label>
....then with CSS you can hide the checkbox if needed, but either are clickable to toggle the checkbox.
You can test out a demo here, also showing some button-ish CSS on the label if needed.

This example uses a button to toggle the checkbox on/off.
http://jsfiddle.net/DnEL3/
<input type="checkbox" id="finRot" name="something" value="Fin Rot">
<button onclick="document.getElementById('finRot').checked=!document.getElementById('finRot').checked;">Fin Rot</button>

How about a HTML solution.
<p><input type="checkbox"
value="Another check box"
name="cboxwithlabel" id="idbox"><label
for="idbox">Another
checkbox</label></p>
<label> Creates label for the checkbox or radio buttons.

If you are looking for bootstrap solution, I just created this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Here starts the component -->
<label class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="form-control btn btn-primary">
Click to toggle checkbox
</span>
</label>
<!-- Here ends the component -->
</div>
</div>
</div>