JSFiddle - React, Tailwind, and code Playground
HTML
<div class="modal">
<div class="blueBtn">Go Button</div>
<div class="tv-choices">
<div class="choices-title">TV</div>
<div class="choices-checkboxes">
<div class="category_box">
<input type="checkbox" id="animated" name="getfItem" value="Adult Animated">
<label for="get{038}">Adult Animated</label>
</div>
<div class="category_box">
<input type="checkbox" id="anime" name="getfItem" value="Anime">
<label for="get{9FA}">Anime</label>
</div>
<div class="category_box">
<input type="checkbox" id="awards" name="getfItem" value="Award Shows">
<label for="get{821}">Award Shows</label>
</div>
</div>
</div>
</div>
CSS
.blueBtn {
width: 100px;
height: 30px;
padding-top:15px;
background: blue;
color: white;
text-align:center;
}
JavaScript
/*$(".selected_row").on('click', '.blueBtn', blueBtnClicked);*/ // Was dynamically generated
$(".blueBtn").click(blueBtnClicked);
function blueBtnClicked(event){
var searchValues = ["anime", "awards"];
$('.modal').find('input:checkbox').each(function() {
//var checked = searchValues.indexOf($(this).val()) >= 0;//Select by value
var checked = searchValues.indexOf($(this).prop('id')) >= 0;//Select by "ID" NOT value
$(this).prop('checked', checked);
alert($(this).val() + " will be set to " + checked);
});
//alert('searchValues = '+searchValues);
}
function setClicked(event){
$('.modal').find('input:checkbox').each(function() {
console.log($(this).prop);
});
//alert('searchValues = '+searchValues);
}
$("[name=getfItem]").change(function(){
setClicked();
});