AngularJs bind an Array to an checkbox - javascript

i have the following JS and HTML:
$scope.loadInstallation = function (installationid) {
$scope.currentInstallation = {};
$scope.currentInstallation = $scope.installationList[installationid];;
$scope.currentInstallationID = installationid;
};
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList1">Module 1:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList1" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList2">Module 2:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList2" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList3">Module 3:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList3" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList4">Module 4:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList4" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList5">Module 5:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList5" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList6">Module 6:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList6" ng-model="currentInstallation.moduleIdList" /></label>
</div>
</div>
</div>
</div>
And an JSON, which look something like this:
currentInstallation =
{
"id":"1",
"moduleIdList": [ "1", "2" ]
}
The "1" in the "moduleIdList" equals "true" in the HTML "Module 1:" Checkbox, the Problem is, I don't know, how to bind the "moduleIdList" to the Checkboxes, so that when there's a "1" in "moduleIdList" the Checkbox is checked and when someone uncheck it, the "1" will be deleted out of the Array
Hope you can understand my problem, I'm glad for any help!
Greetings,
Simon


Ok, I got an workaround, which is fine for me.
I just don't use the ng-model, instead I use ng-checked ng-click, so I can use functions, which will do exactly what I want:
$scope.loadInstallation = function (installationid) {
$scope.currentInstallation = {};
$scope.currentInstallation = $scope.installationList[installationid];;
$scope.currentInstallationID = installationid;
};
$scope.isModuleSelected = function (id) {
if ($scope.currentInstallation.moduleIdList != null && $scope.currentInstallation.moduleIdList.indexOf(id) != -1)
return true;
else
return false;
};
$scope.toggleModule = function (id) {
if ($scope.currentInstallation.moduleIdList == null)
$scope.currentInstallation.moduleIdList = [];
var numberOnIndex = $scope.currentInstallation.moduleIdList.indexOf(id);
if (numberOnIndex == -1)
$scope.currentInstallation.moduleIdList.push(id);
else
$scope.currentInstallation.moduleIdList.splice(numberOnIndex, 1);
};
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList1">Module 1:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList1" ng-checked="isModuleSelected('1')" ng-click="toggleModule('1')" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList2">Module 2:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList2" ng-checked="isModuleSelected('2')" ng-click="toggleModule('2')" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList3">Module 3:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList3" ng-checked="isModuleSelected('3')" ng-click="toggleModule('3')" /></label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList4">Module 4:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList4" ng-checked="isModuleSelected('4')" ng-click="toggleModule('4')" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList5">Module 5:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList5" ng-checked="isModuleSelected('5')" ng-click="toggleModule('5')" /></label>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="installationmoduleIdList6">Module 6:</label>
<div class="form-control">
<label><input type="checkbox" id="installationmoduleIdList6" ng-checked="isModuleSelected('6')" ng-click="toggleModule('6')" /></label>
</div>
</div>
</div>
</div>

Related

disable radio input passed time button

I want to disable todays passed time.
For example:
if time 11:00 and 11:15 are passed then these button are not suppose to
be clickable.
Times input buttons are as follow:
11:00 11:15 11:30 11:45
12:00 12:15 12:30 12:45
13:00 13:15 13:30 13:45
19:00 19:15 19:30 19:45
20:00 20:15 20:30 20:45
21:00 21:15 21:30 21:45
I think I need to improve this check to disabled the input time buttons.
if ( c_hour >= o_hour && ( (c_minutes >= 15 ) ) ) {
option.prop('disabled', true);
Note:
o_hour - clicked button hour
o_minutes - clicked button minute
My function
function updateTimeWindow(type) {
let today = new Date();
let c_hour = today.getUTCHours();
let c_minutes = today.getUTCMinutes();
let next_hour = c_hour;
// $('#time_selector option').each(function () {
$("input[name='time_selector']").each(function () {
var option = $(this);
var o_hour = $(this).attr('data-hour');
var o_minutes = $(this).attr('data-minute');
let current_element_id = option.attr('id')
if (type == 1) { // today
// disable passed time.
// if (o_hour <= c_hour || (o_hour <= next_hour && o_minutes <= c_minutes)) {
if ( c_hour >= o_hour && ( (c_minutes >= 15 ) ) ) {
option.prop('disabled', true);
$('label[class="'+current_element_id+'"]').addClass('no-drop');
}
} else if (type == 2) { // tommorrow.
// enable all time.
option.prop('disabled', false);
$('label[class="' + current_element_id + ' no-drop"]').attr('class', current_element_id);
}
});
}
Time input radio are having following times
html
<div class="tab" style="display: block;">
<div class="row new-rcb ">
<div class="col-md-12 mb-2">
<h5>Time</h5>
</div>
<div class="col-12 text-center mb-2">
<h3>Midday</h3>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt1" name="time_selector" value="11:00" data-hour="11" data-minute="00" disabled="">
<label class="tt1 no-drop" for="tt1" style="justify-content: center;">11:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt2" name="time_selector" value="11:15" data-hour="11" data-minute="15" disabled="">
<label class="tt2 no-drop" for="tt2" style="justify-content: center;">11:15 </label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt3" name="time_selector" value="11:30" data-hour="11" data-minute="30" disabled="">
<label class="tt3 no-drop" for="tt3" style="justify-content: center;">11:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt4" name="time_selector" value="11:45" data-hour="11" data-minute="45" disabled="">
<label class="tt4 no-drop" for="tt4" style="justify-content: center;">11:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt5" name="time_selector" value="12:00" data-hour="12" data-minute="00" disabled="">
<label class="tt5 no-drop" for="tt5" style="justify-content: center;">12:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt6" name="time_selector" value="12:15" data-hour="12" data-minute="15" disabled="">
<label class="tt6 no-drop" for="tt6" style="justify-content: center;">12:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt7" name="time_selector" value="12:30" data-hour="12" data-minute="30" disabled="">
<label class="tt7 no-drop" for="tt7" style="justify-content: center;">12:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt8" name="time_selector" value="12:45" data-hour="12" data-minute="45" disabled="">
<label class="tt8 no-drop" for="tt8" style="justify-content: center;">12:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt9" name="time_selector" value="13:00" data-hour="13" data-minute="00" disabled="">
<label class="tt9 no-drop" for="tt9" style="justify-content: center;">13:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt10" name="time_selector" value="13:15" data-hour="13" data-minute="15" disabled="">
<label class="tt10 no-drop" for="tt10" style="justify-content: center;">13:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt11" name="time_selector" value="13:30" data-hour="13" data-minute="30" disabled="">
<label class="tt11 no-drop" for="tt11" style="justify-content: center;">13:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="tt12" name="time_selector" value="13:45" data-hour="13" data-minute="45">
<label class="tt12" for="tt12" style="justify-content: center;">13:45</label>
</div>
</div>
</div>
<div class="row new-rcb ">
<div class="col-12 text-center mb-2 mt-2">
<h3>Evening</h3>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t21" name="time_selector" value="19:00" data-hour="19" data-minute="00">
<label class="t21" for="t21" style="justify-content: center;">19:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t22" name="time_selector" value="19:15" data-hour="19" data-minute="15">
<label class="t22" for="t22" style="justify-content: center;">19:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t23" name="time_selector" value="19:30" data-hour="19" data-minute="30">
<label class="t23" for="t23" style="justify-content: center;">19:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t24" name="time_selector" value="19:45" data-hour="19" data-minute="45">
<label class="t24" for="t24" style="justify-content: center;">19:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t25" name="time_selector" value="20:00" data-hour="20" data-minute="00">
<label class="t25" for="t25" style="justify-content: center;">20:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t26" name="time_selector" value="20:15" data-hour="20" data-minute="15">
<label class="t26" for="t26" style="justify-content: center;">20:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t27" name="time_selector" value="20:30" data-hour="20" data-minute="30">
<label class="t27" for="t27" style="justify-content: center;">20:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t28" name="time_selector" value="20:45" data-hour="20" data-minute="45">
<label class="t28" for="t28" style="justify-content: center;">20:45</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t29" name="time_selector" value="21:00" data-hour="21" data-minute="00">
<label class="t29" for="t29" style="justify-content: center;">21:00</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t210" name="time_selector" value="21:15" data-hour="21" data-minute="15">
<label class="t210" for="t210" style="justify-content: center;">21:15</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t211" name="time_selector" value="21:30" data-hour="21" data-minute="30">
<label class="t211" for="t211" style="justify-content: center;">21:30</label>
</div>
</div>
<div class="col-md-3">
<div class="option">
<input type="radio" id="t212" name="time_selector" value="21:45" data-hour="21" data-minute="45">
<label class="t212" for="t212" style="justify-content: center;">21:45</label>
</div>
</div>
</div>
</div>

The hardest part is to simplify ...
const
myform = document.querySelector('#my-form')
, timSelects_Rbuttons = document.querySelectorAll('input[name="time_selector"]')
;
updateTimeWindow(1)
function updateTimeWindow(type)
{
let today = new Date();
let c_HourMinut = (today.getUTCHours() * 60) + today.getUTCMinutes();
if (type===2) c_HourMinut = -1 // tommorrow case ??
if (myform.time_selector.value) // clear radio button time_selector selection
document.querySelector('input[name="time_selector"]:checked').checked = false;
timSelects_Rbuttons.forEach( rButton =>
{
let
[o_hour, o_minutes ] = rButton.value.split(':').map(Number)
, o_HourMinut = (o_hour *60 ) + o_minutes
, timOff = (o_HourMinut < c_HourMinut)
;
rButton.disabled = timOff
rButton.closest('label').classList.toggle('no-drop',timOff)
})
}
// testing part
myform.onsubmit = e =>
{
e.preventDefault() // disable submit for testing
console.clear()
console.log('myform.time_selector.value =', myform.time_selector.value )
}
.no-drop { color : orange }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<form id="my-form">
<div class="tab">
<div class="row new-rcb ">
<div class="col-md-12 mb-2">
<h5>Time</h5>
</div>
<div class="col-12 text-center mb-2">
<h3>Midday</h3>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:00"> 11:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:15"> 11:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:30"> 11:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="11:45"> 11:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:00"> 12:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:15"> 12:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:30"> 12:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="12:45"> 12:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:00"> 13:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:15"> 13:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:30"> 13:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="13:45"> 13:45 </label>
</div>
</div>
<div class="row new-rcb ">
<div class="col-12 text-center mb-2 mt-2">
<h3>Evening</h3>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:00"> 19:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:15"> 19:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:30"> 19:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="19:45"> 19:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:00"> 20:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:15"> 20:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:30"> 20:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="20:45"> 20:45 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:00"> 21:00 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:15"> 21:15 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:30"> 21:30 </label>
</div>
<div class="col-md-3">
<label> <input type="radio" name="time_selector" value="21:45"> 21:45 </label>
</div>
</div>
</div>
<br><br><br><br><button type="submit"> get Selected (for testing) </button>
</form>

How to require at least one checkbox to be selected

Why is this script not working? Is it possible that I am targeting the attributes wrong? Result of this form should be that it cannot be submitted unless at least one checkbox is selected, however, user can select as many as they want.
function valCheckbox() {
var checkboxes = document.getElementsByTagName("checkbox");
var atLeastOneCheckBoxIsChecked = false;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked == true) {
atLeastOneCheckBoxIsChecked = true;
break;
}
}
if (atLeastOneCheckBoxIsChecked === false) {
alert("Please select at least one option.");
}
}
<div class="elq-field-style form-element-layout row">
<div class="col-sm-12 col-xs-12">
<label class="elq-label">Please select one or more options</label>
<div>Choose as many as apply</div>
<div id="formElement13">
<div class="single-checkbox-row row">
<input type="checkbox" name="option1">
<label class="checkbox-aligned elq-item-label">Option 1</label>
</div>
</div>
<div id="formElement14">
<div class="single-checkbox-row row">
<input type="checkbox" name="option2">
<label class="checkbox-aligned elq-item-label">Option 2</label>
</div>
</div>
<div id="formElement15">
<div class="single-checkbox-row row">
<input type="checkbox" name="option3">
<label class="checkbox-aligned elq-item-label">Option 3</label>
</div>
</div>
<div id="formElement16">
<div class="single-checkbox-row row">
<input type="checkbox" name="option4">
<label class="checkbox-aligned elq-item-label">Option 4</label>
</div>
</div>
<div id="formElement17">
<div class="single-checkbox-row row">
<input type="checkbox" name="option5">
<label class="checkbox-aligned elq-item-label">Option 5</label>
</div>
</div>
<div id="formElement18">
<div class="single-checkbox-row row">
<input type="checkbox" name="option6">
<label class="checkbox-aligned elq-item-label">Option 6</label>
</div>
</div>
</div>
</div>
<div id="formElement20" class="elq-field-style form-element-layout row">
<div class="col-sm-4 col-xs-12">
<div class="row">
<div class="col-xs-12">
<input type="Submit" class="sub-button" value="Submit" onclick="valCheckbox();">
</div>
</div>
</div>
</div>

There's no Tagname checkbox so
var checkboxes = document.getElementsByTagName("checkbox");
Will return an empty array
You should use querySelectorAll and target input with type=checkbox
var checkboxes = document.querySelectorAll('input[type=checkbox]');

jQuery: show Div when check first radio button

In the example below, I'm trying to show a specific div only when i check the radio button "yes".
It's ok for one div but when I try to do this for two separate panes, checking the second radio button also expands the first field.
How can I fold/unfold each container separately?
https://jsfiddle.net/vsf7mph8/3/
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||$('.form-radio input:nth-child(2)').val() == $(this).val())
$('.otherRowinput').toggle('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>

Your mistake is that $('.otherRowinput').toggle('fast'); applies to all text fields. However, you only want to apply it to the nearest text field.
For this, don't use the $(selector) function which applies to all objects in the DOM, but traverse the DOM starting from the checkbox that was modified. Starting from the currently checked box, traverse the DOM upwards until you find a common parent of the checkbox and the textarea, then traverse it downwards to the text area and toggle that.
You find the parent that includes both the checkbox and the text field with $(this).closest(selector). Then, starting from that parent object, select the text area that is a child of that element using find(selector). In total:
$(this).closest(".row").find(".otherRowinput").toggle('fast');
Below is your updated example.
$('.row .otherRowinput').hide();
$('[type=radio]').on('change', function () {
if($('.form-radio input:nth-child(1)').val() == $(this).val() ||
$('.form-radio input:nth-child(2)').val() == $(this).val()){
$(this).closest(".row").find(".otherRowinput").toggle('fast');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="one" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="one">
<i class="helper"></i>no
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control">
</textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label>
<div class="form-radio">
<div class="radio radio-inline">
<label>
<input type="radio" name="two" class="showOtherFiled" >
<i class="helper"></i>yes
</label>
</div>
<div class="radio radio-inline">
<label>
<input type="radio" name="two">
<i class="helper"></i>two
</label>
</div>
</div>
</div>
</div>
<div class="col-md-12 otherRowinput">
<div class="form-group">
<textarea id="my1" name="my1" type="text" class="form-control" required></textarea>
</div>
</div>
</div>

Jquery Generically, show/Hide division within division in Yes/No Radio button

Basically, I wanted to show/hide the div by clicking Yes/No Radio button. I have also done a sample types in the fiddle link below. I want to make this Generic, like one function can do for all the yes/no questions. and i want to avoid the multiple if condtion in jquery.
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no"> No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
My jquery look this.
$('input[name="student"]:radio').change(function () {
var radio_value = ($('input:radio[name="student"]:checked').val());
if (radio_value == 'yes') {
$('.studentsType').slideDown("fast");
}
else if (radio_value == 'no') {
$('.studentsType').slideUp("fast");
}
});
$('input[name="gradstd"]:radio').change(function () {
var radio_value = ($('input:radio[name="gradstd"]:checked').val());
if (radio_value == 'yes') {
$('.departName').slideDown("fast");
}
else if (radio_value == 'no') {
$('.departName').slideUp("fast");
}
});
$('input[name="living"]:radio').change(function () {
var radio_value = ($('input:radio[name="living"]:checked').val());
if (radio_value == 'yes') {
$('.earning').slideDown("fast");
}
else if (radio_value == 'no') {
$('.earning').slideUp("fast");
}
});
Links for Fiddle:
http://jsfiddle.net/mgrgfqfd/
Please help !!

You can use a data attribute in the radio buttons to indicate which DIV should be toggled.
$(':radio[data-rel]').change(function() {
var rel = $("." + $(this).data('rel'));
if ($(this).val() == 'yes') {
rel.slideDown();
} else {
rel.slideUp();
rel.find(":text,select").val("");
rel.find(":radio,:checkbox").prop("checked", false);
}
});
.studentsType,
.departName,
.earning {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="student" id="studentYes" value="yes" data-rel="studentsType">Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" id="studentNo" value="no" data-rel="studentsType">No
</label>
</div>
<div id="stdTypes" class="studentsType">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes" data-rel="departName">Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no" data-rel="departName">No
</label>
</div>
<div class="departName">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes" data-rel="earning">Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no" data-rel="earning">No
</label>
</div>
<div class="earning">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>

If you keep this sort of structure it can be achieved with a tiny bit of code:
http://jsfiddle.net/mgrgfqfd/2/
HTML:
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div class="well well-sm">
<label class="control-label">1) Are you a Student??</label>
<div class="control-group" data-target="gruduate">
<label class="radio-inline">
<input type="radio" name="student" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="student" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.1) Are you a Graduate Student?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd1" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="gradstd" id="gradstd2" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">1.2) Please Enter your Department?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="well well-sm">
<label class="control-label">2) Are you earning for your living?</label>
<div class="control-group">
<label class="radio-inline">
<input type="radio" name="living" value="yes"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="living" value="no"> No
</label>
</div>
<div class="optional">
<label class="control-label">2.1) How much do you earn?</label>
<div class="control-group">
<input type="text" />
</div>
</div>
</div>
</div>
<div class="panel-footer">Panel footer</div>
</div>
</div>
JS:
$('input:radio').on('change', function() {
$(this).parents('.control-group').next('div.optional').toggle( $(this).val() == 'yes' );
});
Just ensure that your yes/no buttons are within a control-group and you put the optional elements directly after it inside a div with a class of .optional

Below code will find next div and perform sliding in jquery this helps you to avoid multiple redundant lines of code and ifs.
$('input:radio').on('change', function () {//Register change event for all radio button
if ($(this).val() == 'yes') {//check value of selected radio is yes
$(this).parent().parent().next('div').slideDown("fast");
}
else if ($(this).val() == 'no') {//check value of selected radio is no
$(this).parent().parent().next('div').slideUp("fast");
}
});

How to set width to Input text field in bootstrap under class

In the below layout, the last text field(UserName) alone not in correct size. I tried many ways, but nothing works. pls share any idea. my code is
<div id="wrapper">
<div class="row">
<div class="col-lg-6 vcenter ">
<div class="panel panel-success">
<div class="panel-heading text-center">
<h4>Login Help</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="row col-lg-12 radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username
</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email
</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile
</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus>
</div>
<div class="radio row col-lg-12" style="margin-top:5%;">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password
</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email
</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile
</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email">
</div>
<div class="col-lg-12 row">
<div class="col-lg-6">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>

If all you're concerned with is the size of the last input then change this:
You have col-lg-12 row with a col-lg-6 inside of it, remove the col-lg-6 and change the col-lg-12 row to col-lg-6 row.
That being said I've included two alternative layouts that use bootstrap default classes and standard layouts for forms that may help as you're mixing col-*-* with rows in the same div and that isn't how the grid is structured.
See working examples with your original code (*fixed) and two samples.
<div class="col-lg-6 row">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<div class="row">
<div class="col-lg-6 vcenter ">
<div class="panel panel-success">
<div class="panel-heading text-center">
<h4>Login Help (Original)</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="row col-lg-12 radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email" autofocus>
</div>
<div class="radio row col-lg-12" style="margin-top:5%;">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label>
<div class="form-group col-lg-offset-3" style="margin-top:2%;">
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label>
<label class="form-group col-lg-offset-1">
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label>
</div>
</div>
<div class="row col-lg-6">
<label>Email Address</label>
<!--<input class="col-lg-offset-1">-->
<input class="form-control col-lg-offset-3" placeholder="E-mail" name="email" type="email">
</div>
<div class="col-lg-6 row">
<label>Username</label>
<input class="form-control col-lg-offset-3" placeholder="Username" name="uname" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6 vcenter">
<div class="row">
<div class="panel panel-warning">
<div class="panel-heading text-center">
<h4>Standard Form</h4>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked>Forgot Username</label>
<label>
<input type="radio" name="userMailMob" id="mail1" value="option1" checked>Email</label>
<label>
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Email Address</label>
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="userPwd" id="userpwd2" value="option2">Forgot Password</label>
<label>
<input type="radio" name="pwdMailMob" id="mail2" value="option1">Email</label>
<label>
<input type="radio" name="pwdMailMob" id="mob2" value="option1">Mobile</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Email Address</label>
<input class="form-control" placeholder="E-mail" name="email" type="email">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>Username</label>
<input class="form-control" placeholder="Username" name="uname" type="text">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-6 vcenter">
<div class="row">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h4>INLINE FORM</h4>
</div>
<div class="panel-body">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" name="userPwd" id="userpwd1" value="option1" checked/>Forgot Username</label>
<label class="radio-inline">
<input type="radio" name="userMailMob" id="mail1" value="option1" checked/>Email</label>
<label class="radio-inline">
<input type="radio" name="userMailMob" id="mob1" value="option1">Mobile</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Email Address</label>
<div class="col-sm-8">
<input class="form-control" placeholder="E-mail" name="email" type="email" autofocus/>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" name="userPwd" id="userpwd2" value="option2" />Forgot Password</label>
<label class="radio-inline">
<input type="radio" name="pwdMailMob" id="mail2" value="option1" />Email</label>
<label class="radio-inline">
<input type="radio" name="pwdMailMob" id="mob2" value="option1" />Mobile</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Email Address</label>
<div class="col-sm-8">
<input class="form-control" placeholder="E-mail" name="email" type="email" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">Username</label>
<div class="col-sm-8">
<input class="form-control" placeholder="Username" name="uname" type="text" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>

Set the heights of input elements using classes like .input-lg and .input-sm.
Set the widths of elements using grid column classes like .col-lg-* and .col-sm-*.
bootstrap

Categories

Resources