Checkbox list of values selection and removal - javascript

I have a list with checkbox values. My aim is to allow users to click on the whole coloured box for each value (i.e. the checkbox will mark when they click either the checkbox, the name, and the whole coloured box). I kinda achieved that but somehow the checkbox box shows up in the middle when hover over.
Here my BOOTPLY - BOOTPLY
$("#clear").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
<div class="btn-toolbar">
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-default" type="button">Brand</button>
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Alpha</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Beta
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Gamma</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Delta</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Omega</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Koppa
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Primary buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-primary" type="button">Colour</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Eins</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Zwei
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Drei</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Vier</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fünf</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sechs
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Info buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-info" type="button">Merchant</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> First value</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Second option
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Third choice</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fourth alternative</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Fifth decision</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Sixt focus
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div><!--Success buttons with dropdown menu-->
<div class="btn-group">
<button class="btn btn-danger" type="button">Price</button>
<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown" type="button"><span class="caret"></span></button>
<div class="dropdown-menu scrollable-menu" style="margin-left: 2em">
<input class="typeahead" placeholder="Search values" type="text">
<div class="checkbox">
<label><input value="" type="checkbox"> Value-1</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-2
</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-3</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-4</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-5</label>
</div>
<div class="checkbox">
<label><input value="" type="checkbox"> Value-6
</label>
</div>
<div class="div_form">
<span class="btn_apply" id="apply">Apply</span>
<span class="btn_clear"><input id="clear" type="checkbox">Clear</span>
</div>
</div>
</div>
</div><!--Success buttons with dropdown menu-->


Do this for a correct hover:
Remove the with: 100% from .checkbox :hover:
.checkbox :hover {
background-color: red;
cursor: pointer;
/* width: 100%; */
}
Note
Also keep in mind you should post different questions, when you really ahve different questions in SOF. Thus the question and its answers would be more usefull to the community.
Also here is not a place, people do thing for you. You should show some effort and let people help YOU solve it.
UPDATE 1
and add it to the label:
.checkbox label, .radio label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: 400;
cursor: pointer;
width: 100%;
}

Related

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/>

removeClass from the parent dropdown when values change

I got this script to work that is, to add class to the parent dropdown: others. However, on subsequent change of value in the dropdown, the class activated doesn't work anymore
JSFiddle Demo
HTML:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="term" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-primary w-100 active">
<input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
</label>
<div class="btn-group btn-dropdown w-100">
<label class="btn btn-primary w-100 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<input type="radio" class="" name="options" id="option4" autocomplete="off"> <span class="selection">Other</span> <span class="caret"></span>
</label>
<div class="dropdown-menu dropdown-menu-right">
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="40" id="option3" autocomplete="off"> 40
</label>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
$(".dropdown-menu label").click(function(){
var selText = $(this).text();
$(this).parents('.btn-group').find('.selection').html(selText+' <span class="caret"></span>');
$(this).parents('.btn-group').find('.dropdown-toggle').addClass('activated');
$(this).parents('.btn-group').find('label').click(function(){
$(this).parents('.btn-group').find('.dropdown-toggle').removeClass('activated');
});
});
Look at the demo and try changing the value in the dropdown. The activated class gets added the first time in the parent but as you keep changing the values, it doesn't work anymore. How do I go about fixing this?

Don't add a click event handler inside another one:
$(this).parents('.btn-group').find('label').click(function(){
In this way you create as many click handlers as many times you click on first element.
Another issue is in this line:
$(".dropdown-menu label").click(function(){
Change that line to:
$('#term label').on('click', function(e) {
Now you can listen for every label and so you can do what necessary:
$('#term label').on('click', function(e) {
if ($(this).closest('.btn-group').is('.btn-dropdown')) {
var selText = $(this).text();
var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
$(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
} else {
$(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
}
});
$('#term label').on('click', function(e) {
if ($(this).closest('.btn-group').is('.btn-dropdown')) {
var selText = $(this).text();
var x = $(this).closest('.btn-group').find('.selection').html(selText + ' <span class="caret"></span>');
$(this).closest('.btn-group').find('.dropdown-toggle').addClass('activated');
} else {
$(this).closest('.btn-group').find('.dropdown-toggle').removeClass('activated');
}
});
.btn-group .dropdown-menu.show {
border: 2px solid blue;
padding: 0;
}
.btn-group .dropdown-menu .btn {
margin: 0;
border-radius: 0;
border: 0;
border-bottom: 2px solid blue;
}
.btn-group .dropdown-menu .btn input {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.btn.btn-primary.w-100.dropdown-toggle.activated {
background-color: #0f3b83;
border: solid 2px #0f3b83;
color: #fff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="term" class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
<label class="btn btn-primary w-100 active">
<input type="radio" name="options" value="5" id="option1" autocomplete="off"> 5
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="10" id="option2" autocomplete="off"> 10
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="15" id="option3" autocomplete="off"> 15
</label>
<div class="btn-group btn-dropdown w-100">
<label class="btn btn-primary w-100 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<input type="radio" class="" name="options" id="option4" autocomplete="off"> <span
class="selection">Other</span> <span class="caret"></span>
</label>
<div class="dropdown-menu dropdown-menu-right">
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="20" id="option3" autocomplete="off"> 20
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="25" id="option3" autocomplete="off"> 25
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="30" id="option3" autocomplete="off"> 30
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="35" id="option3" autocomplete="off"> 35
</label>
<label class="btn btn-primary w-100">
<input type="radio" name="options" value="40" id="option3" autocomplete="off"> 40
</label>
</div>
</div>
</div>
</div>
</div>
</div>

Radio Button Conflict between Bootstrap And Angular js

<!-- Container -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="page-header text-center">
<h2>Radio Button Conclict between Bootstrap And Angular</h2>
</div>
</div>
</div>
<div class="row">
<!-- With data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has data-toggle property
</h4>
</div>
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection | json}}</p>
</div>
</div>
</div>
<!--/ With data-toggle -->
<!-- Without data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has NOT data-toggle property
</h4>
</div>
<div class="btn-group row">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection2 | json}}</p>
</div>
</div>
</div>
<!--/ Without data-toggle -->
</div>
</div>
<!--/ Container -->
" data-toggle="buttons" " tag does not allow the angular js to work properly as u can u see in this plnkr example too.. but if i remove then its working fine..
but i want ot keep it as it is..
http://plnkr.co/edit/l36UgnR7kltphXdEQLCk?p=preview

By hiding the radio buttons using the data-toggle="button" attribute on the btn-group, bootstrap is not allowing the click event to propagate down to the radio input. You can counter this effect by adding ng-click bindings to the .btn elements.
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary" ng-click="selection = 'option1'">
<input type="radio" data-ng-model="selection" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary" ng-click="selection = 'option2'">
<input type="radio" data-ng-model="selection" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary" ng-click="selection = 'option3'">
<input type="radio" data-ng-model="selection" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
PS. the reason you'll notice that clicking the top set of radio affects the bottom set is because they have the same name attribute. Change this as needed and you'll notice that each group works correctly/independently of the other

Because of same name for input this is happening.
<div class="row">
<div class="col-lg-12">
<div class="page-header text-center">
<h2>Radio Button Conclict between Bootstrap And Angular</h2>
</div>
</div>
</div>
<div class="row">
<!-- With data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has data-toggle property
</h4>
</div>
<div class="btn-group row" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection" name="group1" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection | json}}</p>
</div>
</div>
</div>
<!--/ With data-toggle -->
<!-- Without data-toggle -->
<div class="col-lg-6">
<div class="row">
<h4 class="col-lg-12">
This has NOT data-toggle property
</h4>
</div>
<div class="btn-group row">
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option1" />
<span>Option 1</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option2" />
<span>Option 2</span>
</label>
<label class="btn btn-primary">
<input type="radio" data-ng-model="selection2" name="options" value="option3" />
<span>Option 3</span>
</label>
</div>
<div class="row">
<div class="col-lg-6">
<p>Model: {{selection2 | json}}</p>
</div>
</div>
</div>
<!--/ Without data-toggle -->
</div>
</div>
<!--/ Container -->
http://plnkr.co/edit/chzO8o7gx2STGkyQ8SNK?p=preview

check all radio button checked and then move to next page

I want validate to check whether all radio buttons are checked and move to next division. There are five radio button groups. When I clicked submit button validate that five radio button groups to check whether clicked or not
HTML FILE:
<div class="RatContent animated slideInRight" id="question1">
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion" value="good" id="good" class="input-hidden" required />
<label for="good">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion" value="ok" id="ok" class="input-hidden" required />
<label for="ok">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion" value="bad" id="bad" class="input-hidden" required />
<label for="bad">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion1" value="4" id="good1" class="input-hidden" required />
<label for="good1">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion1" value="5" id="ok1" class="input-hidden" required />
<label for="ok1">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion1" value="6" id="bad1" class="input-hidden" required />
<label for="bad1">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion2" value="7" id="good2" class="input-hidden" required />
<label for="good2">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion2" value="8" id="ok2" class="input-hidden" required />
<label for="ok2">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion2" value="9" id="bad2" class="input-hidden" required />
<label for="bad2">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion3" value="7" id="good3" class="input-hidden" required />
<label for="good3">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion3" value="8" id="ok3" class="input-hidden" required />
<label for="ok3">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion3" value="9" id="bad3" class="input-hidden" required />
<label for="bad3">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>How cleanlines is in office?</h5>
</div>
</div>
</div>
<div class="col"><div class="row">
<div class="col">
<input type="radio" name="emotion4" value="7" id="good4" class="input-hidden" required />
<label for="good4">
<i class="fa fa-thumbs-o-up"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion4" value="8" id="ok4" class="input-hidden" required />
<label for="ok4">
<i class="fa fa-smile-o"></i>
</label>
</div>
<div class="col">
<input type="radio" name="emotion4" value="9" id="bad4" class="input-hidden" required />
<label for="bad4">
<i class="fa fa-thumbs-o-down"></i>
</label>
</div>
</div></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col next">
<button type="submit" class="right">
<i style="color:black;" ng-click="openCity(event, 'question2' , 'question1')" class="ionicons ion-arrow-right-c"></i>
</button>
</div>
</div>
<!-- End content-->
</div>
JS FILE:
$scope.openCity = function(evt, cityName , Currentdiv) {
var i, x;
x = document.getElementsByClassName("RatContent");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
var flag=0;
$("#"+Currentdiv).find("input[type='radio']").each(function(){
if($("input[type='radio']").is(':checked') == true ){
flag=1;
return false;
}
});
alert(flag);
if(flag==0){
document.getElementById(cityName).style.display = "block";
}
else{
alert("sfsdf");
}
}

You are using angular js library but not using ng-repeat directive. Create an array which is have radio structure example:
$scope.myArray = [
{
"header" : "First",
"radios" : [
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
},
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
}
]
},
{
"header" : "Second",
"radios" : [
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
},
{
"checked" : true,
"icon" : "fa-smile",
"id": "good"
}
]
}
]
In your html create rows and radios with ng-repeat :
<div class="row" style="border-bottom: 1px solid #f1f1f1 ;" ng-repeat="data in myArray">
<div class="col col-60">
<div class="row">
<div class="col">
<h5>{{data.header}}</h5>
</div>
</div>
</div>
<div class="col" ng-repeat="myRadio in data.radios">
<div class="row">
<div class="col">
<input type="radio" name="emotion" ng.model="myRadio" id="myRadio.id" class="input-hidden" required />
<label for="myRadio.id">
<i class="fa {{myRadio.icon}}"></i>
</label>
</div>
</div>
</div>
</div>

I'm not entirely sure if this is what you had in mind but check it out: http://codepen.io/Knollo/pen/EgXLaW
For the sake of simplicity I've modified your DOM somewhat.
HTML
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion" value="good" id="good" class="input-hidden" required />
<label for="good">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion" value="ok" id="ok" class="input-hidden" required />
<label for="ok">
<i class="fa fa-smile-o">ok</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion" value="bad" id="bad" class="input-hidden" required />
<label for="bad">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion1" value="4" id="good1" class="input-hidden" required />
<label for="good1">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion1" value="5" id="ok1" class="input-hidden" required />
<label for="ok1">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion1" value="6" id="bad1" class="input-hidden" required />
<label for="bad1">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion2" value="7" id="good2" class="input-hidden" required />
<label for="good2">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion2" value="8" id="ok2" class="input-hidden" required />
<label for="ok2">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion2" value="9" id="bad2" class="input-hidden" required />
<label for="bad2">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion3" value="7" id="good3" class="input-hidden" required />
<label for="good3">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion3" value="8" id="ok3" class="input-hidden" required />
<label for="ok3">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion3" value="9" id="bad3" class="input-hidden" required />
<label for="bad3">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<div class="question">
<p class="question__title">How cleanlines is in office?</p>
<div class="question__answer">
<input type="radio" name="emotion4" value="7" id="good4" class="input-hidden" required />
<label for="good4">
<i class="fa fa-thumbs-o-up">good</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion4" value="8" id="ok4" class="input-hidden" required />
<label for="ok4">
<i class="fa fa-smile-o">okay</i>
</label>
</div>
<div class="question__answer">
<input type="radio" name="emotion4" value="9" id="bad4" class="input-hidden" required />
<label for="bad4">
<i class="fa fa-thumbs-o-down">bad</i>
</label>
</div>
</div>
<button onclick="validateGroups()">submit</button>
CSS (scss)
.question {
margin: 10px 0;
padding: 20px 0;
border-bottom: 1px solid black;
&__title {
font-weigth: bold;
color: red;
margin: 0 0 10px;
}
}
Javascript
function validateGroups() {
$questions = $('.question');
$answeredQuestions = $questions.filter(checkForValidAnswer);
if ($answeredQuestions.length != $questions.length) {
alert('not all questions have been answered, yet.');
} else {
alert('all questions answered. proceeding...');
}
}
function checkForValidAnswer($index, question) {
// get all answers
$answers = $(question).find('.question__answer');
// try to find a checked answer
$selectedAnswer = $answers.find('input:checked');
// return false if no checked answer was found
if ($selectedAnswer.length < 1)
return false;
// true, otherwise
return true;
}

Javascript onchange function doesn't change div [duplicate]

This question already has answers here:
JavaScript onchange function doesn't work
(3 answers)
Closed 7 years ago.
So I don't know how to to go about having my onchange function to populate the div the radio button its connected too since I'm not to familiar with how JavaScript works as i tried pasting the HTML in the JavaScript....The tables radio button is supposed to populate its connected div with check boxes while the view radio button is supposed to have its div be empty. Codepen http://codepen.io/MarkBond/pen/JdOZaw?editors=101 BTW this is done in bootstrap
JAVASCRIPT:
function changeSelection() {
if (document.getElementById("selectionTables").checked) {
document.getElementById("dropdownMenuSelect").innerHTML = "Tables";
document.getElementById("populateCheckBoxes").innerHTML = "";
} else {
document.getElementById("dropdownMenuSelect").innerHTML = "Views";
document.getElementById("unpopulateCheckBoxes").innerHTML = "";
}
}
HTML:
this isn't anywhere in the codepen because I have no idea where to put it :/
<div class="checkbox">
<label>
<input type="checkbox" id="selectionCondition" />Condition
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionDistribution" />Distribution
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionProgram" />Program
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="selectionTreatment" />Treatment
</label>
</div>
HERES THE RADIO BUTTON AND DROPDOWN:
<form role="form">
<div class="row">
<div class="radio col-xs-2" id="populateSelection" onchange="changeSelection()">
<label>
<input type="radio" name="optradio" id="selectionTables" />Use Tables
</label>
<label>
<input type="radio" name="optradio" id="selectionViews" />Use Views
</label>
</div>
<div class="dropdown col-xs-10">
<!--DROPDOWN BUTTON-->
<button class="btn btn-default dropdown-toggle btn-xs btn-orange" type="button" id="dropdownMenuSelect" data-toggle="dropdown" aria-expanded="true" style="margin-top:10px">
Tables
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuSelect">
<!--DROPDOWN MENU-->
<li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneChart">Chart</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" class="link-no-jump" href="#graphOneData">Data</a></li>
</ul>
</div>
</div>
<div class="row" id="populateCheckBoxes"></div>
<div class="row" id="unpopulateCheckBoxes"></div>
</form>

The div doesn't change, so onchange is not going to work. Try this:
<label>
<input type="radio" name="optradio" id="selectionTables" onchange="changeSelection()" />Use Tables
</label>
<label>
<input type="radio" name="optradio" id="selectionViews" onchange="changeSelection()"/>Use Views
</label>

Categories

Resources