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);
});

How to check multiple selectors to trigger an event?

New to jquery but I am working on a responsive calendar. Now I have a start date and an end date field. If the end date is populated, the reoccurrence check box shows as it removes it from the not-visible class.
How can I add a check on the start date also? I want the check box to show when both of the start and end fields are filled not just one.
$("#end_date").on("input", function (){
if($('#end_date').length >= 1) {
$("#reoccurrence").removeClass('not-visible');
} else {
$("#reoccurrence").addClass('not-visible');
}
});
.not-visible {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<div class="md-form md-form-container-fix">
<input type="text" id="start_date" class="form-control date-picker" name="start_date" required />
<label for="start_date">Start Date</label>
</div>
</div>
<div class="col">
<div class="md-form md-form-container-fix">
<input type="text" id="end_date" class="form-control date-picker" name="end_date" required />
<label for="end_date">End Date</label>
</div>
</div>
<div class="form-check not-visible" id="reoccurrence" name="reoccurrence">
<input class="form-check-input" type="checkbox" id="is_reoccurring" name="is_reoccurring" value="1" />
<label class="form-check-label" for="is_reoccurring"> Reoccurrence? </label>
</div>

In this context, using length will tell you whether that input exists in the DOM (0 = doesn't exist, 1 = exists), but it won't evaluate the values of the inputs.
length
The number of elements in the jQuery object.
The number of elements currently matched.
Instead, I recommend using val() to verify that the values of both inputs are not empty strings.
In the demonstration below, I define each input and the "reoccurrence" element as variables. I use add() to combine the two inputs and bind the event handler to both. Alternatively, you could simply select both inputs: $("#start_date,#end_date"); see multiple selector.
Upon input, I define a boolean "oneEmpty" variable based on the values of both inputs. Then, I use toggleClass() to "add or remove one or more classes ... depending on ... the value of the state argument."
When either input is empty, the "oneEmpty" state is true and the "not-visible" class is toggled on. When both inputs are filled, the state is false and the class is toggled off.
var $start_date = $('#start_date');
var $end_date = $('#end_date');
var $reoccurrence = $("#reoccurrence");
$start_date.add($end_date).on("input", function() {
let oneEmpty = $start_date.val() == '' || $end_date.val() == '';
$reoccurrence.toggleClass('not-visible', oneEmpty);
});
.not-visible {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col">
<div class="md-form md-form-container-fix">
<input type="text" id="start_date" class="form-control date-picker" name="start_date" required />
<label for="start_date">Start Date</label>
</div>
</div>
<div class="col">
<div class="md-form md-form-container-fix">
<input type="text" id="end_date" class="form-control date-picker" name="end_date" required />
<label for="end_date">End Date</label>
</div>
</div>
<div class="form-check not-visible" id="reoccurrence" name="reoccurrence">
<input class="form-check-input" type="checkbox" id="is_reoccurring" name="is_reoccurring" value="1" />
<label class="form-check-label" for="is_reoccurring"> Reoccurrence? </label>
</div>

Access a Particular Div Without Changing Class Name

I have a simple requirement: Based on the response of a user on a particular yes no question, show him another question.
The issue is I am using Bootstrap forms so all my div classes are named form-group, and this is the problem: If I rename the class to say, form-group1, my website shape gets disconfigured...some form items appear out of position.
<script src="http://code.jquery.com/jquery-latest.js" />
<script>
$(document).ready(function () {
$(".form-group1").hide();
$("#r1").click(function () {
$(".form-group1").show();
});
$("#r2").click(function () {
$(".form-group1").hide();
});
});
</script>
<form action="">
<input type="radio" name="gender" id="r1" value="female" onClick="getResults()">Single
<input type="radio" name="gender" id="r2" value="male">Married
<!-- Textarea -->
<div class="form-group1">
<label class="col-md-4 control-label" for="q2">By When is your marriage scheduled?</label>
<div class="col-md-4">
<textarea class="form-control" id="q2" name="Q2" placeholder="e.g. FY18 Q4"></textarea>
</div>
</div>
<br />
<br />
<input type="submit" value="Submit">
</form>
So my question is how can I access the particular div that contains the text-area without changing the class-name?

An element can have as many classes as you like.
So just as an alternative, rather than changing the class name, you can also add another class (separated by a space). That way your bootstrap styles are still applied (since you still have the form-group class), but you can also add your own.
<div class="form-group custom-form-group">
<label class="col-md-4 control-label" for="q2">
By When is your marriage scheduled?
</label>
<div class="col-md-4">
<textarea class="form-control" id="q2" name="Q2" placeholder="e.g. FY18 Q4"></textarea>
</div>
</div>
Then in your script you can target the custom-form group class and it should work as you intended.

You can access the div container by first accessing the ID you know and then traverse:
<input type="radio" name="gender" id="r1" data-div="q2" value="female">Female
<input type="radio" name="gender" id="r2" data-div="q2" value="male">Male
$("[name=gender]").on("click",function() {
$("#"+$(this).data("div")) // textarea with known ID from data attribute
.closest("div.form-group") // the container
.toggle(this.value=="male"); // show or hide
})

You can use DOM relationship to target the desired element, You can traverse up to common ancestor using .closest() then use .find() to get the target element.
$(this).closest("form").find(".form-group").show();
$(document).ready(function() {
$(".form-group").hide();
$("#r1").click(function() {
$(this).closest("form").find(".form-group").show();
});
$("#r2").click(function() {
$(this).closest("form").find(".form-group").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<input type="radio" name="gender" id="r1" value="female">Single
<input type="radio" name="gender" id="r2" value="male">Married
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="q2">By When is your marriage scheduled?</label>
<div class="col-md-4">
<textarea class="form-control" id="q2" name="Q2" placeholder="e.g. FY18 Q4"></textarea>
</div>
</div>
<br><br><input type="submit" value="Submit">
</form>

You can leave the class name unchanged and add an id to the form like this
<div id="form1" class="form-group">...</div>
And then in jQuery do this
$("#form1").show(); // showing the form
$("#form1").hide(); // hiding the form

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>

How to edit the text of label

I am new to JavaScript.Could anybody suggest me how to change the text of label in below code
<div class="col-sm-6">
<div class="radio">
<label for="radioabc">
<input id="radioabc" type="radio" value="def" name="input_Radio">
abc
</label>
</div>
<div class="radio">
<label for="radioxyz">
<input id="radioxyz" type="radio" value="pqr" name="input_Radio">
xyz
</label>
</div>
</div>
I want to change text 'abc' and text 'xyz' to other values.
My approch to change text 'abc' to 'tvr'.
I've tried:
$($(".col-sm-6").children()[0]).children().text("tvr");
then it also removes input field.whats wrong in my approach or please suggest some other approach.

if you want to change text by Javascript:
var divs = document.getElementsByClassName('radio');//got all nodes in divs
divs[0].children[0].lastChild.data = "tvr"; // similar for second text...using divs[1]
JSFIDDLE DEMO

You can use jQuery and do it easily:
Example
html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-6">
<div class="radio">
<label for="radioabc">abc</label>
<input id="radioabc" type="radio" value="def" name="input_Radio" />
</div>
<div class="radio">
<label for="radioxyz">
xyz
</label>
<input id="radioxyz" type="radio" value="pqr" name="input_Radio" />
</div>
</div>
javascript:
<script>
$(function() {
$('label').on('click', function(){
$(this).text('something else');
})
});
</script>