We Keep Coding

Change background of the parent div when radio button is checked

I have the following code in my template where radio button is selected when its wrapping/parent div is clicked.
Additionally I'm trying to change the background color to red and text color to white of the selected radio option.
If the radio option is unchecked reset its background color to default white and text color to black.
But with my code background and text of all select option is set to background color to white and text color to black.
How can I set option's background color to default white and text color to black if other option is selected.
Both Jquery and javascript approach is appreciated. Thanks.
$('.selectRadio').click(function(event) {
/* console.log($('.selectRadio').length) */
;
let element = $('.selectRadio');
let radButton = $(this).find('input[type=radio]');
for (let i = 0; i <= element.length; i++) {
/* $('selector').index(this) */
if (element.index(this) - 1 == i) {
console.log(element.index(this) - 1);
console.log(i);
radButton.prop("checked", true);
radButton.parent().css("background-color", "red");
radButton.parent().css("color", "white");
} else {
radButton.parent().css("background-color", "unset");
radButton.parent().css("color", "unset");
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio" >Option 1</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio">Option 3</label>
</div>
</div>
</div>
</div>

You need to find the radioButton again within the for loop and invert the if logic to something like below code snippet.
$('.selectRadio').click(function(event) {
let element = $('.selectRadio');
let radButton = $(this).find('input[type=radio]');
radButton.parent().css("background-color", "red");
radButton.parent().css("color", "white");
for (let i = 0; i <= element.length; i++) {
let radButton = $(element[i]).find('input[type=radio]');
if (element.index(this) !== i) {
console.log(element.index(this));
radButton.parent().css("background-color", "white");
radButton.parent().css("color", "red");
} else {
radButton.prop("checked", true);
radButton.parent().css("background-color", "red");
radButton.parent().css("color", "white");
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio" >Option 1</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label><input type="radio" name="optradio">Option 3</label>
</div>
</div>
</div>
</div>

Your code is a lot more complex that it needs to be. Simplify it by putting the 'active' state CSS rules in to a class
which you add/remove based on the state of the checkbox. Note that you should use the change event handler when dealing with radio and checkbox inputs.
let $containers = $('.radio');
$containers.find(':radio').on('change', e => {
$containers.removeClass('active'); // remove from all containers
$(e.target).closest('.radio').addClass('active'); // add class to current
});
.active {
background-color: #F00;
color: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 selectRadio">
<div class="radio">
<label>
<input type="radio" name="optradio" />
Option 1
</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label>
<input type="radio" name="optradio">
Option 2
</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<label>
<input type="radio" name="optradio">
Option 3
</label>
</div>
</div>
</div>
</div>
It's also worth noting that you can achieve a very similar effect using CSS alone by moving the radio button outside of the label:
.radio :checked + label {
color: #FFF;
background-color: #F00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 selectRadio">
<div class="radio">
<input type="radio" name="optradio" id="opt1" />
<label for="opt1">Option 1</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<input type="radio" name="optradio" id="opt2" />
<label for="opt2">Option 2</label>
</div>
</div>
<div class="col-4 selectRadio">
<div class="radio">
<input type="radio" name="optradio" id="opt3" />
<label for="opt3">Option 3</label>
</div>
</div>
</div>
</div>

If I select a checkbox, I deactivate another

Update 10/21/2021 - I still need a resolution.
Here's the situation: As you can see in the visual example below. I have four - buttons radio - I need to make an event where when I select the option "NO" of the compo I automatically disable the two selections in the field .
If "YES" is selected, the two other selections must remain active. My problem is because the four stamps are "radio buttons" and not a checkbox.
Visual example:
<-- IVF fertilization -->
⬜ Yes
⬜ No
<-- if IVF ovum -->
⬜ Own
⬜ From a donor
And the third code is the HTML part, for analysis.
I have this snippet:
Code 1
Base PHP code I'm using.
<!-- IVF fertilization -->
<div class='col-sm-4'>
<?=_('IVF fertilization')?>
<div>
<input type="radio" id="yesFe" name="niptData_ivfFertilization" value='1'
<?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '1' OR $registration->test->data->ivfFertilization == '1') ? 'checked' : ''?>
>
<label for="yesFe" class='smallLabel'><?=_('Yes')?></label>
</div>
<div>
<input type="radio" id="noFe" name="niptData_ivfFertilization" value='0'
<?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '0' OR $registration->test->data->ivfFertilization == '0') ? 'checked' : ''?>
>
<label for="noFe" class='smallLabel'><?=_('No')?></label>
</div>
</div>
<!-- if IVF ovum -->
<div class='col-sm-4'>
<?=_('If IVF ovum')?>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value='1' data-validation=""
<?=($_SESSION['OPTIONAL']['niptData_ovum'] == '1' OR $registration->test->data->ovum == '1') ? 'checked' : ''?>
>
<label for="ownOv" class='smallLabel'><?=_('Own')?></label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" value='2' data-validation=""
<?=($_SESSION['OPTIONAL']['niptData_ovum'] == '2' OR $registration->test->data->ovum == '2') ? 'checked' : ''?>
>
<label for="fromADonor" class='smallLabel'><?=_('From a donor')?></label>
</div>
<br>
</div>
CODE 2
Script that working to solve the problem.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#new_user_form *').filter(':radio').change(function() {
if(this.id=='noFe' && this.value=='0' && $(this).is(':checked')) {
$('#new_user_form *').filter(':radio').each(function(){
if(this.id=='noFe' && this.value=='0') {
} else {
$(this).attr("checked",false);
}
});
}
if((this.id=='ownOv' || this.id=='fromADonor' && this.value=='0') {
var checkedId = this.id;
var checkedOrNot = $(this).is(':checked');
$('#new_user_form *').filter(':radio').each(function(){
if(this.id==checkedId && (this.value=='1' || this.value=='2')) {
if(checkedOrNot) {
$(this).attr("disabled",true);
} else {
$(this).attr("disabled",false);
}
}
});
</script>
CODE 3
HTML code that was asked of me.
<div class="col-sm-4">
Pregnancy<span class="required">*</span>
<div class="has-error">
<input type="radio" id="yesFe" name="niptData_ivfFertilization-required0allow" value="1" data-validation="required" class="error" style="border-color: rgb(185, 74, 72);">
<label for="yesFe" class="smallLabel">Yes</label>
<span class="help-block form-error">Required field</span></div>
<div class="has-success">
<input type="radio" id="noFe" name="niptData_ivfFertilization-required0allow" value="0" data-validation="required" class="valid" style="">
<label for="noFe" class="smallLabel">No</label>
</div>
</div>
<div class="col-sm-4">
if FIVET, ovum<span class="optional"></span>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value="1" data-validation="">
<label for="ownOv" class="smallLabel">Own</label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" value="2" data-validation="">
<label for="fromADonor" class="smallLabel">
As a donor</label>
</div>
<br>
</div>

I dont know if I understand right but here is solution:
1- I deleted the codes that not inportant for that issue
2- I added class name "secondis" to elements that I will disable after checkbox clicked
Hope you got what you wanted
$("#yesFe").click(function(){
if ($(this).prop("checked") == true) {$("#secondissue").show();$(".secondis").prop('disabled', false);}
else {$("#secondissue").hide();$(".secondis").prop('disabled', true);}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
Pregnancy<span class="required">*</span>
<div class="has-error">
<input type="checkbox" id="yesFe" name="niptData_ivfFertilization-required0allow" value="1" data-validation="required" class="error " style="border-color: rgb(185, 74, 72);">
<label for="yesFe" class="smallLabel">Sì</label>
<span class="help-block form-error">Required field</span></div>
<div class="has-success">
<input type="checkbox" id="noFe" name="niptData_ivfFertilization-required0allow" value="0" data-validation="required" class="valid" style="">
<label for="noFe" class="smallLabel">No</label>
</div>
</div>
<div class="col-sm-4" id ="secondissue" style="display:none">
Se FIVET, ovuli<span class="optional"></span>
<div>
<input type="radio" id="ownOv" name="niptData_ovum" value="1" class="secondis" data-validation="" >
<label for="ownOv" class="smallLabel">Propri</label>
</div>
<div>
<input type="radio" id="fromADonor" name="niptData_ovum" class="secondis" value="2" data-validation="" >
<label for="fromADonor" class="smallLabel">Da donatrice</label>
</div>
<br>
</div>

Simple quiz issue

I'm trying to build a basic one question quiz. Based on the checkboxes checked 1 of 3 result divs should show.
If consolidation hasn’t been checked then it should show the low results div
If everything has been checked then show the high results div
If consolidation has been ticked but other items are unticked then show medium results div
I also need to populate the medium results div with the names of the boxes that weren't checked on submit but I don't know how to go about it. Right now I've got it mostly working on submit but I can only get medium and low results to show, not the high results div. I think it's an issue with the priorities of the statements.
https://jsfiddle.net/lucym/azLf2s0t/3/
var a = document.querySelector('#consolidation');
var btn = document.querySelector('#btn')
btn.onclick = () => {
if (a.checked == false) {
$('#low').show();
} else if ($('#list :checkbox:not(checked)').length == 0) {
$('#high').show();
} else if (a.checked == true) {
$('#medium').show();
} else {
alert('select an option');
}
};
.results {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list" style="max-width: 650px; margin: 40px auto;">
<!-- Consolidatation-->
<fieldset>
<input id="consolidation" type="checkbox" name="">
<label>Searched and combined lost funds</label>
</fieldset>
<!-- Advice -->
<fieldset>
<input id="advice" type="checkbox" name="">
<label>Talked with an advisor</label>
</fieldset>
<!-- identity -->
<fieldset>
<input id="identity" type="checkbox" name="">
<label>Completed an ID check</label>
</fieldset>
<!-- balance -->
<fieldset>
<input id="balance" type="checkbox" name="">
<label>Checked your balance</label>
</fieldset>
<!-- app -->
<fieldset>
<input id="app" type="checkbox" name="">
<label>Downloaded the Sunsuper app</label>
</fieldset>
<!-- calculator -->
<fieldset>
<input id="calculator" type="checkbox" name="">
<label>Used our retirement calculator</label>
</fieldset>
<!-- SUBMIT BUTTON -->
<input type="button" id="btn" value="Submit">
<!-- Result options -->
<div id="low" class="results">low results</div>
<div id="medium" class="results">medium results</div>
<div id="high" class="results">high results</div>
</div>

You missed : before checked ($('#list :checkbox:not(:checked)').length == 0):
var a = document.querySelector('#consolidation');
var btn = document.querySelector('#btn')
btn.onclick = () => {
if (a.checked == false) {
$('#low').show();
$('#high').hide();
$('#medium').hide();
} else if ($('#list :checkbox:not(:checked)').length == 0) {
$('#high').show();
$('#medium').hide();
$('#low').hide();
} else if (a.checked == true) {
mytext='<br> You have an average results, try doing :<br>';
var unchecked = $('#list :checkbox:not(:checked)');
for (i = 0; i < unchecked.length-1; i++)
mytext +=unchecked[i].nextSibling.nextSibling.innerText+', ';
mytext+=unchecked[unchecked.length-1].nextSibling.nextSibling.innerText;
mytext+=' to improve.';
$('#medium').append(mytext);
$('#medium').show();
} else {
alert('select an option');
}
};
.results {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list" style="max-width: 650px; margin: 40px auto;">
<!-- Consolidatation-->
<fieldset>
<input id="consolidation" type="checkbox" name="">
<label>Searched and combined lost funds</label>
</fieldset>
<!-- Advice -->
<fieldset>
<input id="advice" type="checkbox" name="">
<label>Talked with an advisor</label>
</fieldset>
<!-- identity -->
<fieldset>
<input id="identity" type="checkbox" name="">
<label>Completed an ID check</label>
</fieldset>
<!-- balance -->
<fieldset>
<input id="balance" type="checkbox" name="">
<label>Checked your balance</label>
</fieldset>
<!-- app -->
<fieldset>
<input id="app" type="checkbox" name="">
<label>Downloaded the Sunsuper app</label>
</fieldset>
<!-- calculator -->
<fieldset>
<input id="calculator" type="checkbox" name="">
<label>Used our retirement calculator</label>
</fieldset>
<!-- SUBMIT BUTTON -->
<input type="button" id="btn" value="Submit">
<!-- Result options -->
<div id="low" class="results">low results</div>
<div id="medium" class="results">medium results</div>
<div id="high" class="results">high results</div>
</div>

Javascript conditionals not working on correct button combination

I have 5 if else conditions under function getRadioButtonValue. The function does not go through all the conditions even after clicking the right button combinations.
I have tried to debug the script using Chrome Developer tools but the problem still exists. Where is the code breaking?
Some information regarding the page, I am using Javascript to hide the div's and headers so that at any one time there is only one question seen.
Only the first if conditions work, but nothing else
The results are seen after Get Result button is clicked on the last page which should redirect to the appropriate page.
[DELETED CODE]
[UPDATED CODE]
I am unable to auto hide my div's based on the response given below by Keith.
FYI: His code works as expected.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 445px;
background: #EFDFBC;
}
</style>
</head>
<body>
<div id="first-question" class="visible">
<h3>How?</h3>
<ul>
<li>abc</li>
<li>def</li>
</ul>
<hr>
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
<div id="second-question" class="hidden">
<h3>To</h3>
<hr>
<input type="radio" name="quiz-question-two" id="quiz-question-two-yes" value="yes" />
<label for="quiz-question-two-yes" id="twoYes">Yes</label>
<input type="radio" name="quiz-question-two" id="quiz-question-two-no" value="no" />
<label for="quiz-question-two-yes" id="twoNo">No</label>
</div>
<div id="third-question" class="hidden">
<h3>Make </h3>
<hr>
<input type="radio" name="quiz-question-three" id="quiz-question-three-yes" value="yes" />
<label for="quiz-question-three-yes" id="threeYes">Yes</label>
<input type="radio" name="quiz-question-three" id="quiz-question-three-no" value="no" />
<label for="quiz-question-three-yes" id="threeNo">No</label>
</div>
<div id="fourth-question" class="hidden">
<h3>This</h3>
<hr>
<input type="radio" name="quiz-question-four" id="quiz-question-four-yes" value="yes" />
<label for="quiz-question-four-yes" id="fourYes">Yes</label>
<input type="radio" name="quiz-question-four" id="quiz-question-four-no" value="no" />
<label for="quiz-question-four-yes" id="fourNo">No</label>
</div>
<div id="fifth-question" class="hidden">
<h3>Work?</h3>
<hr>
<input type="radio" name="quiz-question-five-yes" id="quiz-question-five-yes" value="yes" />
<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
<input type="radio" name="quiz-question-five-no" id="quiz-question-five-no" value="no" />
<label for="quiz-question-five-yes" id="fiveNo">No</label>
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
</body>
</html>
<script type="text/javascript">
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.quiz-question-one && r.quiz-question-two && r.quiz-question-three && r.quiz-question-four && r.quiz-question-five) {
rt.text('All Yes');
} else if (!r.quiz-question-one && !r.quiz-question-two && !r.quiz-question-three && !r.quiz-question-four && !r.quiz-question-five) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.hidden'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('visible');
next_page.addClass('visible');
if (next_page.hasClass('result')) updateResult();
});
});
</script>

I've created an example below that I think you can work from. The values from the radio I don't think get updated until you submit, instead I've captured the results in the onclick. You can now add back you CSS styling etc. Hope that helps.
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.q1 && r.q2 && r.q3) {
rt.text('All Yes');
} else if (!r.q1 && !r.q2 && !r.q3) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.page'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('active');
next_page.addClass('active');
if (next_page.hasClass('result')) updateResult();
});
});
.page {
display: none;
}
.page.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page active">
<div>Question 1</div>
<label for="q1yes">Yes</label>
<input id="q1yes" type="radio" name="q1" value="yes">
<label for="q1no">No</label>
<input id="q1no" type="radio" name="q1" value="no">
</div>
<div class="page">
<div>Question 2</div>
<label for="q2yes">Yes</label>
<input id="q2yes" type="radio" name="q2" value="yes">
<label for="q2no">No</label>
<input id="q2no" type="radio" name="q2" value="no">
</div>
<div class="page">
<div>Question 3</div>
<label for="q3yes">Yes</label>
<input id="q3yes" type="radio" name="q3" value="yes">
<label for="q3no">No</label>
<input id="q3no" type="radio" name="q3" value="no">
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
In the above you are using type="radio", that means all type="radio" with the same name will group together, and not just these two. To group together just give them a name on the input. eg.
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
Above you can see I've given the 2 inputs the name="quiz-question-one", and then for the next question maybe give them a name="quiz-question-two" etc..
On another note, there are lots of places where your code could be simplified, but hopefully this will solve your current problem.

Check/Uncheck of check-boxes upon certain events

this is my code :
script.js
$(document).ready(function() {
$('.checkbox_servers_list').click(function(){
var checkedValues = $('.group-list:checkbox:checked').map(function() {
return this.value;
}).get();
console.log(checkedValues);
var check_hosts = ["192.168.33.50", "192.168.33.100"]; // This value will be dynamic via ajax call.
for (each in check_hosts){
$(".host-list:checkbox[value='"+check_hosts[each]+"']").attr("checked", true);
}
});
});
and the HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="group-list-id" class="checkbox_servers_list"><div class="col-md-12">
<input type="checkbox" value="all" name="checkbox" class="group-list" id="group-checkbox_0">
<label for="group-checkbox_0">all</label>
</div> <div class="col-md-12">
<input type="checkbox" value="mumbai" name="checkbox" class="group-list" id="group-checkbox_1">
<label for="group-checkbox_1">mumbai</label>
</div> <div class="col-md-12">
<input type="checkbox" value="okhla" name="checkbox" class="group-list" id="group-checkbox_2">
<label for="group-checkbox_2">okhla</label>
</div> <div class="col-md-12">
<input type="checkbox" value="ungrouped" name="checkbox" class="group-list" id="group-checkbox_3">
<label for="group-checkbox_3">ungrouped</label>
</div> <div class="col-md-12">
<input type="checkbox" value="vagrant1" name="checkbox" class="group-list" id="group-checkbox_4">
<label for="group-checkbox_4">vagrant1</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="bangalore" name="checkbox" class="group-list" id="group-checkbox_5">
<label for="group-checkbox_5">bangalore</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="vagrant2" name="checkbox" class="group-list" id="group-checkbox_6">
<label for="group-checkbox_6">vagrant2</label>
</div>
</div>
<hr>
<div id="host-list" class="checkbox_hosts_list">
<div class="col-md-12">
<input type="checkbox" value="192.168.33.50" name="host-checkbox" class="host-list" id="host-checkbox_0">
<label for="host-checkbox_0">192.168.33.50</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="192.168.33.10" name="host-checkbox" class="host-list" id="host-checkbox_1">
<label for="host-checkbox_1">192.168.33.10</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="192.168.1.57" name="host-checkbox" class="host-list" id="host-checkbox_2">
<label for="host-checkbox_2">192.168.1.57</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="192.168.1.59" name="host-checkbox" class="host-list" id="host-checkbox_3">
<label for="host-checkbox_3">192.168.1.59</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="192.168.33.100" name="host-checkbox" class="host-list" id="host-checkbox_4">
<label for="host-checkbox_4">192.168.33.100</label>
</div>
<div class="col-md-12">
<input type="checkbox" value="192.168.1.58" name="host-checkbox" class="host-list" id="host-checkbox_5">
<label for="host-checkbox_5">192.168.1.58</label>
</div>
</div>
</body>
</html>
What I am trying to achieve is when I click on any check box from the top section, respective check-boxes in the bottom section should get checked(which is happening) but when I un-check a check-box from the top section respective check-boxes in the bottom section should get unchecked(which is not happening).
I tried adding this in the beginnning of the js function.
$(".host-list:checkbox").attr("checked", false);
and
$(".host-list").prop("checked", false);
but it even stops the execution of the first feature.
P.S:
demo fiddle of what is working.

Since you have a list items to be checked, first marks all as unchecked
$(document).ready(function() {
$('.checkbox_servers_list').click(function(){
var checkedValues = $('.group-list:checkbox:checked').map(function() {
return this.value;
}).get();
console.log(checkedValues);
var check_hosts = ["192.168.33.50", "192.168.33.100"]; // This value will be dynamic via ajax call.
$(".host-list:checkbox").prop("checked", false);
for (each in check_hosts){
$(".host-list:checkbox[value='"+check_hosts[each]+"']").prop("checked", true);
}
});
});

Try this to uncheck:
$('.host-list').find('input').prop('checked',false);
UPDATE: You should check your click function and then get values, so inside for I added a conditional.
for (each in check_hosts) {
if($(".host-list:checkbox[value='" + check_hosts[each] + "']").attr("checked")){
$(".host-list:checkbox[value='" + check_hosts[each] + "']").attr("checked", false);
}else {
$(".host-list:checkbox[value='" + check_hosts[each] + "']").attr("checked", true);
}
}