We Keep Coding

Get value from radio button

I'm trying to make a multiple select radio but the output to the console is console=on.
That doesnt help at all. I need to know which (none,t,i or ti) that is selected.
Any idea how to do this?
$('#btnSubmit').click(function() {
var data = $('#containerCreationForm').serialize();
console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="containerCreationForm" method="post">
<div class="content-form">
<label class="col-sm-2 control-label">Console</label>
<div class="col-sm-10">
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="it" class="form-control" type="radio">
<label for="it">Interactive & TTY
<span class="text-blue">(-i -t)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="tty" class="form-control" type="radio">
<label for="tty">TTY
<span class="text-blue">(-t)</span>
</label>
</div>
</div>
<div class="col-sm-5">
<div class="radio radio-info">
<input name="console" id="interactive" class="form-control" type="radio">
<label for="interactive">Interactive
<span class="text-blue">(-i)</span>
</label>
</div>
<div class="radio radio-info">
<input name="console" id="none" class="form-control" type="radio" checked="">
<label for="none">None</label>
</div>
</div>
</div>
<button type="button" id="#btnSubmit">Submit</button>
</div>

Add value attribute in radio button.
Example:
Since,you are using Jquery in your code. I'm using it here:
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='gender']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
In HTML:
<label><input type="radio" name="gender" value="male">Male</label>
<label><input type="radio" name="gender" value="female">Female</label>
<p><input type="button" value="Radio Value"></p>
Hope it helps..!

You need to use names and values to identify what your radios mean
eg
$(function() {
$("form").submit(
function(args) {
args.preventDefault();
console.log($(this).serialize());
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<legend>Gender:</legend>
Male: <input type="radio" name=gender value=m> Female: <input type="radio" name=gender value=f> Other <input type="radio" name=gender value=o>
</fieldset>
<input type=submit>
</form>
this will result in a form value of gender= m | f | o
also note you should be using the forms submit event as this will invoke the forms validation logic which your current code is bypassing

Triggering event on radio button click

I have a few radio buttons, one of which is the 'other' button. If a user clicks 'other' I want to show a text box asking for more info. This is my HTML and JS:
<div class="radio">
<label><input type="radio" name="optradio">Friend</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"> Worked together </label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"> Studied together</label>
</div>
<div class="radio">
<label><input type="radio" name="other-radio" id="connection-invite-other-radio"> Other </label>
</div>
<div class="form-group" id="connection-invite-other">
<input type="text" class="form-control" >
</div>
JS:
$(document).ready(function(){
if($('#connection-invite-other-radio').is(':checked')) {
$('#connection-invite-other').show();
console.log("hi");
}
else {
$('#connection-invite-other').hide();
}
});
This however isn't working. Please help me understand if I'm doing something wrong. Thanks!

The radio needs to have the same name, in your case optradio.
You need to use a change event listener on all radio elements.
$(document).ready(function() {
$('input[type=radio]').change(function() {
if ($('#connection-invite-other-radio').is(':checked')) {
$('#connection-invite-other').show();
} else {
$('#connection-invite-other').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
<label>
<input type="radio" name="optradio">Friend</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Worked together</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio">Studied together</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optradio" id="connection-invite-other-radio">Other</label>
</div>
<div class="form-group" id="connection-invite-other">
<input type="text" class="form-control">
</div>

You need to call change event of radio button to show hide div.
$(document).ready(function(){
$('#connection-invite-other-radio').change(function(){
if($(this).is(':checked')) {
$('#connection-invite-other').show();
console.log("hi");
}
else {
$('#connection-invite-other').hide();
}
});
});

Trigger change event of a checkbox

I've 7 checkboxes (A,B,C,D,E,F,G) and when I click one of them, the value is appended to a textarea. If I uncheck one, the value is removed from the textarea. The jquery code is as below:
var checkboxes = $("input[type='checkbox']");
checkboxes.on('change', function() {
$('#recipient').val(
checkboxes.filter(':checked').map(function(item) {
return this.value;
}).get().join('; ')
);
});
The html code is as below:
<div class="col-sm-5">
<div class="form-group">
<label>Recipient</label>
<textarea class="form-control" rows="5" id="recipient"></textarea>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" rows="5"></textarea>
</div>
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
<div class="col-sm-5">
<label> </label>
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address Book</h3>
</div>
<div class="panel-body">
<div class="checkbox">
<label>
<input type="checkbox" class="member" value="A">A
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="member" value="B">B
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="C">C
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="D">D
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="E">E
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="F">F
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="firm" value="G">G
</label>
</div>
</div>
</div>
</div>
</div>
Now, here is a situation where when I click on Checkbox "C", the following checkboxes D,E,F,G should be disabled as well as if anyone of those checkboxes are already in checked state then it should uncheck and trigger the on change event (as highlighted above in the code) which will remove the value of that checked box from the textarea. I have tried to use the trigger("change") option but could not find a luck. Please help me!
Please note, in the code below I've just tried the trigger event with checkbox D alone to see if it works.
$(function(){
$(".firm[value='C']").change(function(){
$(".firm[value='D']").prop('checked', false).trigger("change");
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked"));
});
});

This seems to work for me:
$(".firm[value='C']").change(function(){
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").prop('checked', false).trigger("change");
$(".firm[value='D'], .firm[value='E'], .firm[value='F'], .firm[value='G']").attr("disabled", $(this).is(":checked"));
});
You can see it in action here:
https://jsfiddle.net/aaronfranco/cvhphzgq/2/

Add values from checkbox and radio to a label using JS or Jquery

I swear I tried a lot before asking you guys, but I just can't make it work properly. I have a radio and a checkbox area as it follows:
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>
I want to sum the user's choices and display it as texts and numbers. The selected radio will be displayed as text inside #resultPlan and it's value inside #sumPlan. The selected checkbox(es) will be displayed as text inside #resultOption and it's value inside #sumOption. If the user checks both boxes, #resultOption will have a comma separating each option and #sumOption will be the sum of both values. Finally, the label #sumTotal will get all the values selected, summed and displayed as a number.
I hope you guys got what I'm trying to do. I hope to find a solution that works with IE, so JS or Jquery.
UPDATE 1:
The code I created (but with no success) was based on each possible case of the use'r choice. That was the basic structure:
$("input[name=linePlan]").on('change',function(){
var linePlan = $('input[name=linePlan]:checked');
if ($(linePlan).is(':checked') && $(this).val() == '100000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 1")
$('#sumPlan').text('100000～')
$('#totalLine').text((Math.round(100000 * 1.08)) + '～') //1.08 is a tax fee
} else if ($(linePlan).is(':checked') && $(this).val() == '126000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 2")
$('#sumPlan').text('126000～')
$('#sumTotal').text((Math.round(126000 * 1.08)) + '～')
}
});
Of course that's not the full code, but that is pretty much what I tried.
Thank you for all the help!

I just created a code for your question. If you need the taxes, just add conditional statements below. Hope this helps.
Check this code :
$("input[name=linePlan],input[type=checkbox]").on('change', function() {
var planvalue = parseInt($('input[name=linePlan]:checked').val());
var plantext = $('input[name=linePlan]:checked').parent().text();
var optionsvalue = 0;
var options = [];
$('input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
optionsvalue += parseInt($(this).val());
options.push($(this).parent().text());
}
});
var optionstext = options.join(',');
$('#resultPlan').text(plantext);
$('#sumPlan').text(planvalue);
$('#resultOption').text(optionstext);
$('#sumOption').text(optionsvalue);
if (optionsvalue == 0)
$('#resultOption').text("No Options");
$('#sumTotal').text(planvalue + optionsvalue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>

How to change the checked value using javascript

I am trying to change the radio button that is checked by default and I cannot access the html to do so, but I can use javascript. Here is the html
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>
Filter By Course Availability
</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">
Search scheduled courses
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">
Search all courses
</label>
</div>
</fieldset>
</div>
</div>
I want to make the searchAvailable the default and here is the javascript that I'm using and it doesn't seem to work. I'm new to this so be nice lol.
var sel = document.getElementById('searchAvailable');
sel.searchALL.removeAttribute('checked');
sel.searchAvailable.setAttribute('checked', 'checked');
document.forms[0].reset();

Just these two lines should be enough:
var sel = document.getElementById('searchAvailable');
sel.checked = true;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="courseSearchAvailability">
<div class="col-xs-12">
<fieldset class="accessibility">
<legend>Filter By Course Availability</legend>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="availforreg" id="searchAvailable">Search scheduled courses</label>
</div>
<div class="radio">
<label>
<input type="radio" name="courseSearch.filterString" value="all" checked="checked" id="searchAll">Search all courses</label>
</div>
</fieldset>
</div>
</div>