title of this question seems to be pretty bad, I am sincerely sorry for that. I just couldn't come up with better phrasing.
I am trying to work on a "webapp" which allows the user to experiment with the logical operators like XOR, NOR and AND on a webpage. I am struggling with the programming though, especially with the NOR operator - which only works, if neither of my two checkboxes are checked.
iif ($("#norA").prop("checked") || $("#norB").prop("checked")) {
$("#nors").html("off");}
{$("#nors").html("on");}
<div class="row" id="options">
<div class="col-md-2"><div class="checkbox">
<label><input type="checkbox" name="nor" id="norA">A</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="nor" id="norB">B</label>
</div></div>
<div class="row" id="result">
<div class="col-md-2"><p id="nors">on</p></div></div> <!--placeholder of the solution/output -->
$(document).ready(function(){
$("[type=checkbox]").change(function(){
if (!($("#norA").is(":checked") && $("#norB").is(":checked"))) { $("#nors").html("on");}
else {$("#nors").html("off");}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="options">
<div class="col-md-2"><div class="checkbox">
<label><input type="checkbox" name="nor" id="norA">A</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="nor" id="norB">B</label>
</div></div>
<div class="row" id="result">
<div class="col-md-2"><p id="nors">on</p></div></div>
if($("#norA").is(":checked") && $("#norB").is(":checked")){
$("#nors").html("off");
}
else{
$("#nors").html("on");
}
This code will handle the input and select the correct nor condition. Note that by separating the functional code from the event handler, you can also use it to set the initial condition, which this does.
$(document).ready(function() {
$("input:checkbox").change(function() {
toggleNors();
});
toggleNors();
})
function toggleNors() {
var nor = !$("#norA").is(":checked") && !$("#norB").is(":checked")
$("#nors").text(nor ? "on" : "off");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="options">
<div class="col-md-2"><div class="checkbox">
<label><input type="checkbox" name="nor" id="norA">A</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="nor" id="norB">B</label>
</div>
</div>
<div class="row" id="result">
<div class="col-md-2">
<p id="nors">on</p>
</div>
</div>
The nor truth table is true if, and only if, neither a nor b are checked, and that's how this is implemented.
Related
I have the following code:
JavaScript:
jQuery(".cbChild").on("change", function () {
//go to parent checkbox to see if it's check. If not, check it.
var parentElement = jQuery(this).closest('cbParentContainer');
//I've also tried
//var parentElement = jQuery(this).parentsUntil('cbParentContainer');
//And
//var parentElement = jQuery(this).parentsUntil('row');
if (jQuery(this).find('input[type=checkbox]').prop("checked")) {
parentElement.prop("checked", true);
}
});
HTML:
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
When one of the child checkboxes (class='cbChild') gets checked, I want to force the parent (class='cbParent') checkbox to also be checked. However, I'm unable to access the parent for some reason. The call to parentElement.prop("checked", true) fails because parentElement isn't the parent checkbox. To further clarify the issue, there are multiple cbEventsConainers with more parent/child checkboxes. I only included one for this post.
We are not dealing with a child-parent relationship here but the following will check the "parent" checkbox when at least one of the children is checked and will uncheck it otherwise.
$(function(){
$("body").on("change",".cbChild input",function(){
var cc=$(this).closest(".cbChildContainer"),p=cc.prev("div").find(".cbParent input");
p.prop("checked",$(".cbChild input:checked",cc).length>0);
});
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
This question already has answers here:
Make input section required when both checkboxes are selected
(5 answers)
Closed 3 years ago.
So I haven't been successful with getting this to work properly, but I have gotten the show/hide portion to work on my form.
Here is what I'm trying to achieve:
- When the My transaction data or Information about my device... is checked, make the last checkbox required.
- When BOTH top checkboxes are checked, make the last checkbox required.
Here is my attempt, but it doesn't work:
$(document).ready(function() {
$('#rtd3Transaction').change(function() {
if ($('#rtdConfirm').attr('required')) {
$('#rtdConfirm').removeAttr('required');
}
else {
$('#rtdConfirm').attr('required','required');
}
});
$('#rtd3Device').change(function() {
if ($('#rtdConfirm').attr('required')) {
$('#rtdConfirm').removeAttr('required');
}
else {
$('#rtdConfirm').attr('required','required');
}
});
$('#rtd3Transaction, #rtd3Device').change(function() {
if ($('#rtd3Transaction').checked && $('#rtd3Transaction').checked) {
$('#rtdConfirm').attr('required','required');
}
else {
$('#rtdConfirm').removeAttr('required');
}
}); });
Code:
<div id='form-wrapper-certain'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<i>You must specify the personal information you would like us to delete:</i>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][checked][]" value="transaction">
<label class="custom-control-label" for="rtd3Transaction">My transaction data</label>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][checked][]" value="device">
<label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label>
</div>
</div>
</div>
<div id='form-wrapper-certain-selection'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Confirm" name="rtd[3][confirm]" value="yes">
<label class="custom-control-label" for="rtd3Confirm">I confirm that I would like not to sell your personal information to third parties.</label>
</div>
</div>
</div>
</div>
</div>
On click event of #rtd3Transaction, #rtd3Device check is if one or both check box is checked than add required. if required is already added than avoid to add it.and if both check box is not checked than remove checked from third one.
check required already added using !$('#rtd3Confirm').prop('required')
$(document).ready(function() {
$('#rtd3Transaction, #rtd3Device').click(function() {
if ($('#rtd3Transaction').prop('checked')==true || $('#rtd3Device').prop('checked')==true) {
if(!$('#rtd3Confirm').prop('required')){
$('#rtd3Confirm').attr('required','required');
}
}else if($('#rtd3Transaction').prop('checked') != true && $('#rtd3Transaction').prop('checked')!=true) {
$('#rtd3Confirm').removeAttr('required');
}
}); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='form-wrapper-certain'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<i>You must specify the personal information you would like us to delete:</i>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Transaction" name="rtd[3][checked][]" value="transaction">
<label class="custom-control-label" for="rtd3Transaction">My transaction data</label>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Device" name="rtd[3][checked][]" value="device">
<label class="custom-control-label" for="rtd3Device">Information about my device(s) collected through cookies and other automated collection tools</label>
</div>
</div>
</div>
<div id='form-wrapper-certain-selection'>
<div class="row mt-3">
<div class="col-sm-1"></div>
<div class="col-sm-11">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="rtd3Confirm" name="rtd[3][confirm]" value="yes">
<label class="custom-control-label" for="rtd3Confirm">I confirm that I would like not to sell your personal information to third parties.</label>
</div>
</div>
</div>
</div>
</div>
You are over thinking (and over coding). You do not need to check if both checkboxes are checked if checking either one is enough. So remove the first two change() methods and modify the last one to check the statuses of 2 checkboxes and decide the requirement.
$('#rtd3Transaction, #rtd3Device').on('change', function() {
if ($('#rtd3Transaction').prop('checked') == true ||
$('#rtd3Device').prop('checked') == true)
{
$('#rtdConfirm').attr('required','required');
}
else {
$('#rtdConfirm').removeAttr('required');
}
});
Note we use .prop('checked') to see if a checkbox is checked or not.
Why not use the || operator instead of &&? This would require the last checkbox if either of the first two (or both) are checked:
$('#rtd3Transaction, #rtd3Device').change(function() {
if ($('#rtd3Transaction').checked || $('#rtdDevice').checked) {
$('#rtdConfirm').attr('required','required');
} else {
$('#rtdConfirm').removeAttr('required');
}
}
And frankly, jQuery might be a bit overkill here (unless you are already using it for other things), so here's a plain modern JS solution:
let rtd3Transaction = document.getElementById("rtd3Transaction");
let rtd3Device = document.getElementById("rtd3Device");
[rtd3Transaction, rtdDevice].forEach(element=>{
element.addEventListener("click", (event)=>{
let rtdConfirm = document.getElementById("rtdConfirm");
if (rtd3Transaction.checked || rtdDevice.checked) {
rtdConfirm.required = "required";
} else {
rtdConfirm.removeAttribute('required');
}
});
});
So I am trying to do an that If the College is selected in the checkbox then the college course would show like
BS-IT,
BS-IT-DA,
BS-CS
in the drop-down
else if the senior high is check then the strand would show
GAS,
IT,
CS.
I don't know if it is required with the JavaScript or
J-Query
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<label><input type="checkbox">College Student</label>
<label><input type="checkbox" class="senior-high" >Senior High</label>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
</div>
//first add id="collage" on collage checkbox and add class="checkbox" on all checkbox add senior_highcheckbox id on senior hs checkbox
$(document).on('click','.checkbox'function(){
if($('#college').is('checked')){
$('#course').append(`<option>BS-IT </option>
<option>BS-IT-DA</option>
<option>BS-CS</option>`);
$('#senior_highcheckbox').attr('checked',false);
}else{
$('#course').append(`<option>GAS</option>
<option>IT</option>
<option>CS</option>`);
$('#college').attr('checked',false);
}
})
I've amended your HTML slightly so I can find the ID with jQuery. What you want to do is to listen out for the checkbox with Jquery and then check its ID attribute. If the attribute is equal to 'college' then append the first list of items. Otherwise it must be the other checkbox so append the others.
$(':checkbox').click(function() {
if ($(this).attr('id') === 'college') {
$('#Course').append($('<option></option>').html('BS-IT'), $('<option></option>').html('BS-IT-DA'), $('<option></option>').html('BS-CS'));
} else {
$('#Course').append($('<option></option>').html('GAS'), $('<option></option>').html('IT'), $('<option></option>').html('CS'));
}
$(':checkbox').attr("disabled", true);
});
$('#cancel').click(function() {
$(':checkbox').prop("checked", false);
$(':checkbox').attr("disabled", false);
$('#Course').empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<input type="checkbox" id="college" name="college">
<label for="college">College Student</label>
<input type="checkbox" id="senior-high" name="senior-high">
<label for="senior-high">Senior High</label>
</div>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
<button id="cancel">Cancel</button>
</div>
I've been trying to use the jquery parentsUntil method to hide a button until a radio box is selected, but I can't seem to get it to work. It's probably something obvious, but it's been bugging me for a couple of days now. Can anyone see what I'm doing wrong.
(function($) {
$(function(){
$('.last-item').change(function() {
if( $(this).val() != '' ) {
$(this).parentsUntil('.step').find('.button-next').removeClass('hide');
$(this).parentsUntil('.step').find('.button-next').addClass('show');
console.log("changing the last item");
}
});
});
})(jQuery);
.hide {
display: none;
}
.show {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="step">
<h1>Step 3 - Personal</h1>
<div class="input-wrapper radio no-feedback">
<div class="row no-gutter content-position-outer">
<div class="col-md-6 content-center-inner">
<label for="gender">What gender are you? <sup>*</sup></label>
</div>
<div class="col-md-6 content-center-inner">
<div class="row">
<div class="col-md-5 col-md-offset-2">
<label class="radio-sex" for="gender_male">
<input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" />
<div class="radio-img radio-img-sex-male"></div>
Male
</label>
</div>
<div class="col-md-5">
<label class="radio-sex" for="gender_female">
<input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" />
<div class="radio-img radio-img-sex-female"></div>
Female
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
Previous
</div>
<div class="col-md-3 col-md-push-6">
Next
</div>
</div>
</div>
JS Fiddle
.parentsUntil() gets "the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector,".
Try .closest() instead
This is likely what you meant?
No need to hide if value is empty since you cannot deselect a radio.
If you want to hide when some value is empty, use .toggle($(this).val()!="")
(function($) {
$(function() {
$('.last-item').on("click",function() { // click assumes radio as last item
$(this).closest("div.step").find('.button-next').show();
});
});
})(jQuery);
.button-next { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="step">
<h1>Step 3 - Personal</h1>
<div class="input-wrapper radio no-feedback">
<div class="row no-gutter content-position-outer">
<div class="col-md-6 content-center-inner">
<label for="gender">What gender are you? <sup>*</sup>
</label>
</div>
<div class="col-md-6 content-center-inner">
<div class="row">
<div class="col-md-5 col-md-offset-2">
<label class="radio-sex" for="gender_male">
<input class="sr-only last-item" type="radio" placeholder="Male" name="gender" value="Male" id="gender_male" required="required" />
<div class="radio-img radio-img-sex-male"></div>
Male
</label>
</div>
<div class="col-md-5">
<label class="radio-sex" for="gender_female">
<input class="sr-only last-item" type="radio" placeholder="Female" name="gender" value="Female" id="gender_female" required="required" />
<div class="radio-img radio-img-sex-female"></div>
Female
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
Previous
</div>
<div class="col-md-3 col-md-push-6">
Next
</div>
</div>
</div>
Try this snippet. I hope it will work
Note:remove hide class from -> class="button-next hide"
$(function(){
$('.button-next').hide();
$('input[type="radio"]').click(function() {
if($(this).prop('checked') == true) {
$('.button-next').show();
}
else {
$('.button-next').hide();
}
});
});
All good sensible answers, guys, but none of them worked for me. In the end I had to use
$(this).closest('.step-3').find('.button-next').css('display','block');
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);
}
}