We Keep Coding

Select only one checkbox HTML

I have a problem with checking only one checkbox... I tried two types of JS code.. But it doesn't work... To check by class, when u click on one element with class 'product-list' to deselect another... Have someone idea how to solve this?
HTML:
<div class="mg-toolbar">
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" type="checkbox" name="PDF" value="<?php echo $file_name; ?>">
<label for="file_1">SELECT</label>
</div>
</div>
JS Try 1:
<script type="text/javascript">
$('.product-list').click(function() {
$(this).siblings('input:checkbox').prop('checked', false);
);
</script>
JS Try 2:
<script type="text/javascript">
$('.product-list').on('change', function() {
$('.product-list').not(this).prop('checked', false);
});
</script>

If you want to ensure that only one item to be selected at once, then actually that's what radio buttons were invented for (rather than checkboxes). And you don't need any JS code to make that work.
Demo:
<div class="mg-toolbar">
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_1" type="radio" name="PDF" value="File1">
<label for="file_1">SELECT 1</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_2" type="radio" name="PDF" value="File2">
<label for="file_2">SELECT 2</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_3" type="radio" name="PDF" value="File3">
<label for="file_3">SELECT 3</label>
</div>
<div class="mg-option checkbox-custom checkbox-inline">
<input class="product-list" id="file_4" type="radio" name="PDF" value="File4">
<label for="file_4">SELECT 4</label>
</div>
</div>

change the #c01 and #c02 to the two check box ID's your doing this with.
I think this may do what you need it to do. If c01 checked, c02 is unchecked, and vice-versa
$("#c01").click(function(){
if($("#c01").is(':checked'))
$("#c02").prop("checked", false);
});
$("#c02").click(function(){
if($("#c02").is(':checked'))
$("#c01").prop("checked", false);
});

Finding data attribute and checkbox children

I hope you can see what I'm trying to do here.
I am trying to keep the same structure for the divs but clicking the select all in the top area only selects those 3 and the bottom select all only selects the bottom 3.
Obviously there are better ways to do this but I have stripped my code back to this basic example.
please help me rewrite this line:
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() {
So i can use the profile-id data attribute to select the checkboxes that fall inside that div.
Thanks
$('.profile #select_all_cb').click(function() {
var profileID = $(this).closest('.profile').data('profile-id');
if($(this).is(":checked")) {
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() {
$(this).prop('checked', true);
});
} else {
$("div").find("[data-profile-id='"+profileID+"']").find(".score_alert_cb1").each(function() { //Check all boxes
$(this).prop('checked', false);
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-profile-id="1">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" id="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
<br /><br />
<div class="profile" data-profile-id="2">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" id="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>

IDs are unique, so changed id="select_all_cb" to class="select_all_cb".
On click .select_all_cb, goes up and finds .profile parent, store the checkbox value as boolean in isChecked variable, and finds all .score_alert_cb1 checkboxes within the current .profile element.
$(".profile .select_all_cb").click(function() {
var profile = $(this).closest(".profile");
// var profileID = profile.data('profile-id');
var isChecked = $(this).is(":checked");
profile.find(".score_alert_cb1").prop("checked", isChecked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="profile" data-profile-id="1">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" class="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>
<br /><br />
<div class="profile" data-profile-id="2">
<div>
A lot of data before my checkbox
</div>
<div>
<input type="checkbox" class="select_all_cb">select all
</div>
<div>
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
<input type="checkbox" class="score_alert_cb1">
</div>
</div>

What's wrong with
$("div").find("[data-profile-id='"+profileID+"']").find("[type=checkbox]")each(...}
?

How to select and deselect multiple check box with a button click in javascript

In my project, i have multiple check box (total 27).I am trying to select all the check box with a single button click and i am able to do it.But i want to deselect the same check box with the same button click.So the button should act like a selector and a de-selector.I can not use a check box instead of the button.
My html code is:
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
In js:
$(self.element).on('click', '.selectAllcountry', function(e) {
debugger;
$('.chkCountry').trigger('click')
e.stopPropagation();
});

Using trigger will always toggle the state, so if some elements are checked and some aren't then it won't work fine.
Instead you can try something like
$(document).on('click', '.selectAllcountry', function(e) {
var $checks = $('.chkCountry');
$checks.prop('checked', !$checks.is(':checked'))
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />

Try this
$('.selectAllcountry').on('click', function(){
if ($('.selectAllcountry').is(':checked')) {
$('.chkCountry').find(':checkbox').prop('checked', true);
} else {
$('.chkCountry').find(':checkbox').prop('checked', false);
}
});

try this....
$(document).on('click', 'input.selectAllcountry', function(e) {
if ($('input.selectAllcountry').is(':checked'))
{
$('.chkCountry').prop('checked',true);
}
else
$('.chkCountry').prop('checked',false);
});

var chkStatus = true;
$('.selectAllcountry').click(function() {
$('.countryAll').find(':checkbox').prop('checked', chkStatus);
chkStatus = !chkStatus;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
<br>
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
</div>

as you have done the portion of selection, now focus on Deselecting.
to remove all checkbox inputs at once
$('input:checkbox').removeAttr('checked');
or you can add class as identifier and then remove checked element on the basis of class.
for exa.
$('.chkCountry').removeAttr('checked');

I think you have made one mistake in your code you have used class attribute twise in html tag.I think that's why it take first class attribute and other are ignored.
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
please combine all class in single class attribute.
I think it will be helpful.

Check box class based click function not working

I am trying to find out which check box is selected in a group of check boxes and read its value.
The following is the checkbox format
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>
I tried giving class names but it didn't work. I gave class names as class="brand_name" and tried to read through jquery click function
$('.brand_name').click(function () {
console.log("click worked")
});
But it didn't work. Can someone suggest me a way to do this.

You are applying the click event handler on div and not on checkboxes
$('.brand_select').on('click', ':checkbox', function() {
alert($(this).is(':checked'));
});
To get list of all checked values:
$('.brand_select').on('click', ':checkbox', function() {
var checkedEl = [];
$('.brand_name :checkbox').each(function () {
if ($(this).is(':checked')) {
checkedEl.push($(this).val());
}
});
console.log('Checked values');
console.log(checkedEl);
});

$('input[type="checkbox"]').on('click',function () {
if(this.checked){
alert($(this).val());
}else{
// .........
}
})

Add the class to input elements and change the name of the fields so that you can use them as array -
<input type="checkbox" name="term[]" value="2" class="brand_name"/>

Here is a possible solution:
$('input[name="term"]').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-body smoothscroll maxheight300 brand_select">
<div class="block-element">
<label>
<input type="checkbox" name="term" value="0" />
Armani </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="1" />
Gucci </label>
</div>
<div class="block-element">
<label>
<input type="checkbox" name="term" value="2" />
Louis Vuitton </label>
</div>
</div>

jQuery - Uncheck other checkboxes if a specific checkbox is selected by user

I would like to uncheck all the checkboxes that are presently selected if a specific checkbox is selected by the user.
Example:
<div>
<label for="foo">
<input type="checkbox" name="meh" id="foo" checked> foo
</label>
</div>
<div>
<label for="bar">
<input type="checkbox" name="meh" id="bar" checked> bar
</label>
</div>
<div>
<label for="foobar">
<input type="checkbox" name="meh" id="foobar"> foobar
</label>
</div>
<div>
<label for="barfoo">
<input type="checkbox" name="meh" id="barfoo" checked> barfoo
</label>
</div>
<div>
<label for="omgwtfbbq">
<input type="checkbox" name="meh" id="omgwtfbbq"> omgwtfbbq
</label>
</div>
If the user selects "omgwtfbbq" checkbox, I would like all the other boxes that might be checked to be unchecked and have the "omgwtfbbq" be the only one checked.

for the label instead of id I think you need for
<div>
<label for="foo">
<input type="checkbox" name="foo" id="foo" checked /> foo
</label>
</div>
<div>
<label for="bar">
<input type="checkbox" name="bar" id="bar" checked /> bar
</label>
</div>
<div>
<label for="foobar">
<input type="checkbox" name="foobar" id="foobar" /> foobar
</label>
</div>
<div>
<label for="barfoo">
<input type="checkbox" name="barfoo" id="barfoo" checked /> barfoo
</label>
</div>
<div>
<label for="omgwtfbbq">
<input type="checkbox" name="omgwtfbbq" id="omgwtfbbq" /> omgwtfbbq
</label>
</div>
then
var $others = $('input[type="checkbox"][name="meh"]').not('#omgwtfbbq')
$('#omgwtfbbq').change(function () {
if (this.checked) {
$others.prop('checked', false)
}
});
$others.change(function () {
if (this.checked) {
$('#omgwtfbbq').prop('checked', false)
}
})
Demo: Fiddle
Note: I'll add a common class to all the input elements which has to be affected by omgwtfbbq and change var $others = $('#foo, #bar, #foobar, #barfoo') to var $others = $('.myclassoninput')

Live demo (click).
$('#omgwtfbbq').click(function() {
$('input:checkbox').not(this).attr('checked', false);
});
Also note that you're re-using id's. Id's should only be used once in a document.

If you choose not to give each checkbox a sequential IDs so that you can use an array, here's a solution:
Place all your controls in a div, with an ID "checkgroup".
Then the JavaScript function goes:
function checkone(d){
if (!d.checked) return; //if it's unchecked, then do nothing
var group=document.getElementById('checkgroup');
var os=group.getElementsByTagName('input');
for (var i=0;i<os.length;i++){
if (os[i].checked&&os[i]!=d) os[i].checked=false;
}
}
Now you can call this function in each checkbox
<div id="checkgroup">
<input id="abcd" onclick="checkone(this);">
<input id="xyz" onclick="checkone(this);">
...
</div>
Note how you don't even need to bother with the name, because the object passes in itself.