Develop Reference

programmatically hide Bootstrap accordion

In my code I use a bootstrap accordion for extra option. When click start, I want to collapse (close) it. I tried
$('#accordion2').collapse({
hide: true
});
But the accordion close and then reopen. A second click do not do anything more. What I miss here? As written in the Bootstrap documentation I use the data-parent to close it.
The code is:
<div id="accordion2" style="width:802px;">
<div class="card">
<div class="card-header" id="headingImgOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseImgOne" aria-expanded="true" aria-controls="collapseImgOne">
Testrun Optionen
</button>
</h5>
</div>
<div id="collapseImgOne" class="collapse" aria-labelledby="headingImgOne" data-parent="#accordion2">
<div class="card-body">
<div class="form-group row">
<label for="text" class="col-4 col-form-label">Server</label>
<div class="col-7">
<div class="input-group">
<div class="form-check">
<label>
<input type="checkbox" name="c06" id="c06" checked> <span class="label-text">c06</span>
</label>
<label>
<input type="checkbox" name="c07" id="c07" checked> <span class="label-text">c07</span>
</label>
<label>
<input type="checkbox" name="c08" id="c08" checked> <span class="label-text">c08</span>
</label>
<label>
<input type="checkbox" name="c09" id="c09"> <span class="label-text">c09</span>
</label>
<label>
<input type="checkbox" name="c10" id="c10"> <span class="label-text">c10</span>
</label>
<label>
<input type="checkbox" name="c11" id="c11"> <span class="label-text">c11</span>
</label>
<label>
<input type="checkbox" name="c12" id="c12"> <span class="label-text">c12</span>
</label>
<label>
<input type="checkbox" name="c13" id="c13"> <span class="label-text">c13</span>
</label>
<label>
<input type="checkbox" name="c14" id="c14"> <span class="label-text">c14</span>
</label>
<label>
<input type="checkbox" name="c15" id="c15"> <span class="label-text">c15</span>
</label>
<label>
<input type="checkbox" name="c16" id="c16"> <span class="label-text">c16</span>
</label>
<label>
<input type="checkbox" name="c17" id="c17"> <span class="label-text">c17</span>
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label for="select" class="col-4 col-form-label">Server Domain</label>
<div class="col-7">
<select id="imgdomain" name="select" class="custom-select">
<option value="domain.com" selected>domain.com</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>

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>

How to make required be empty after selecting radio button

I am trying to change the name of required when it is not selected and I did it. When I click "Send" without selecting it first, it will show an error, but when I selected it again but not the first radio button where I put the required syntax it still shows the same error that forced me to select the first radio button. Is there a way to make it right, please? Thank you for the help.
This is my code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form method="post" action="" id="form">
<div class="container">
<div class="intro-text left-0 text-left text-black p-4 rounded " style="background-color: #ffbe76">
<div class="section-heading-upper">
<p class="mb-3 lead">1. ......?
</p>
</div>
<div class="row ml-2">
<div class="col-auto">
<div class="form-group mx-auto option">
<h2 class="section-heading mb-2">
<span class="text-center section-heading-upper">Layanan</span>
</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting1" value="100.00" required="" oninvalid="this.setCustomValidity('Pick one')" oninput="this.setCustomValidity('')">
<label class="form-check-label" for="exampleRadios1">
Sangat Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting2" value="81.25">
<label class="form-check-label" for="exampleRadios2">
Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting3" value="62.50">
<label class="form-check-label" for="exampleRadios3">
Tidak Penting
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="penting1" id="1penting4" value="43.75">
<label class="form-check-label" for="exampleRadios4">
Sangat Tidak Penting
</label>
</div>
</div>
</div>
<div class="col-auto">
<div class="form-group mx-auto option">
<h2 class="section-heading mb-2">
<span class="text-center section-heading-upper">Kepuasan Layanan</span>
</h2>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas1" value="100.00" required oninvalid="this.setCustomValidity('Pick one')" oninput="setCustomValidity('')">
<label class="form-check-label" for="exampleRadios1">
Sangat Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas2" value="81.25">
<label class="form-check-label" for="exampleRadios2">
Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas3" value="62.50">
<label class="form-check-label" for="exampleRadios3">
Tidak Puas
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="puas1" id="1puas4" value="43.75">
<label class="form-check-label" for="exampleRadios4">
Sangat Tidak Puas
</label>
</div>
</div>
</div>
</div>
<div class="text-center mt-2">
<input class="btn btn-primary btn-lg" value="Send" id="singlebutton" name="submit" type="submit" onclick="check()">
</div>
</form>

You can remove required attributes and test whether a specific one is checked using jQuery as follows:
if ($('input[name=penting1]:checked').length > 0) {
//selected
}
if ($('input[name=puas1]:checked').length > 0) {
//selected
}
it will work :)

Check if radio button in a group has been checked

I have a list of grouped radio buttons, each radio button in a group has an attribute name like this : page-x-layout where x is variable.
My html code looks something like this:
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>
So what I want to do is to check if a radio button is checked in each of those groups.
How can I do that ?

You could map all inputs from rows to array and then use every to check if each row has checked input.
$('input').change(function() {
var check = $('.row').map(function(e) {
return $(this).find('input[type="radio"]').is(':checked')
}).get()
console.log(check.every(e => e == true))
})
.row {
border: 1px solid black;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>

Try this hope it helps!
$('#element').click(function() {
if($('#radio_button').is(':checked')) {
alert("it's checked"); }
});

if (!$("input[name='html_elements']:checked").val()) {
alert('Nothing is checked!');
}
else {
alert('One of the radio buttons is checked!');
}
Using JQuery to check if no radio button in a group has been checked

You can use the onchange event to and get the current input ID and value by using $(this)
$('[type~="radio"]').on('change', function() {
alert("ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val() );
});
$('[type~="radio"]').on('change', function() {
alert("ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>
or if you need all values on load use .each() to get all
$( document ).ready(function() {
$allradio = '';
$('[type~="radio"]').each(function() {
$allradio = $allradio + "ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val()+'\n';
});
alert($allradio);
$('[type~="radio"]').on('change', function() {
alert("ID = " + $(this).attr('id').split(' ') + " Value =" +$(this).val() );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-1-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-1-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-2-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-2-layout">
</div>
</div>
<div class="row">
<div class="col-md-3">
<input id="layout-1-page-3" type="radio" value="1" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-2-page-3" type="radio" value="2" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-3-page-3" type="radio" value="3" name="page-3-layout">
</div>
<div class="col-md-3">
<input id="layout-4-page-3" type="radio" value="4" name="page-3-layout">
</div>
</div>

You can use this code for each Radiobutton:
if(document.getElementById('page-x-layout').checked) {
//do something if radio button is checked
}

AngularJs bind an Array to an checkbox

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>