How to work with two checkbox using jQuery - javascript

I want to show a div which contains company details inputs and if a user check the input YES then show div and if a user check the input NO then hide div.
I have written some first code for the input checkbox YES and it working fine but if input NO is check the div is still there of which i want to hide it and uncheck the YES input checkbox.
somebody help me modify the script.
JavaScript:
$(document).ready(function (e) {
$("#yes").click(function () {
if($(this).is(":checked")) {
$("#companydetials").show();
} else {
$("#companydetials").hide();
}
})
});
HTML:
<p>Do you have a company?
<input name="comorno" type="checkbox" id="yes" form="signupform"> Yes
<input type="checkbox" name="comorno" id="no">No</p>

You need radio button for what you want. Try the following code.
$(document).ready(function (e) {
$("input[name=comorno]").change(function () {
if($(this).is("#yes")) {
$("#companydetials").show();
} else {
$("#companydetials").hide();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Do you have a company?
<input name="comorno" type="radio" id="yes" value="" form="signupform" checked> Yes
<input type="radio" name="comorno" id="no">No</p>
<div id="companydetials">
Company Details Here
</div>
Or if using checkbox is a necessity for you in this case you can do it this way -
$(document).ready(function (e) {
$("input[name^=comorno]").change(function () {
if($(this).is("#yes")) {
$("#companydetials").show();
$("#no").prop("checked", false);
} else {
$("#companydetials").hide();
$("#yes").prop("checked", false);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Do you have a company?
<input name="comorno[]" type="checkbox" id="yes" value="" form="signupform" checked> Yes
<input name="comorno[]" type="checkbox" id="no">No</p>
<div id="companydetials">
Company Details Here
</div>

Check this jsfiddle example - http://jsfiddle.net/ko64a3a8/
<input name="check_status" type="checkbox" class="mycheckbox" value="yes"/>
<div id="myDiv">text</div>
<script>
$(function(){
$('.mycheckbox').change(function(){
if($(this).is(':checked')){
$('#myDiv').show();
}else{
$('#myDiv').hide();
}
})
});
</script>
Or if you want 'yes' and 'no' options
<label for="statYes">Yes</label>
<input name="check_status" id="statYes" type="checkbox" class="mycheckbox" value="yes"/>
<label for="statNo">No</label>
<input name="check_status" id="statNo" type="checkbox" class="mycheckbox" value="no"/>
<div id="myDiv">text</div>
<script>
$(function(){
$('#myDiv').hide();
$('.mycheckbox').change(function(){
if($(this).is(':checked')){
if($(this).val() == 'yes') {
$('#statNo').removeAttr('checked');
$('#myDiv').show();
}else{
$('#statYes').removeAttr('checked');
$('#myDiv').hide();
}
}
})
});
</script>
UPD: Here is the example http://jsfiddle.net/3L3b580h/
When you click 'yes' it shows the div and unchecks the 'no' (if it checked) and backwards

$(document).ready(function (e) {
$('input[name="comorno"]').each(function()
{
$(this).change(function()
{
$('input[name="comorno"]').prop('checked',false);
$(this).prop('checked',true);
if($('#yes').is(':checked')) {
$('#companydetails').show()
} else {
$('#companydetails').hide()
}
});
});
});
Checkout this topic: make checkbox behave like radio buttons with javascript
Fiddle: http://jsfiddle.net/ojensc2y/

Related

Javascript Validation for Multichoice Checkboxes

I would like to create an alert that displays if none of the choices in my check box have been displayed.
<script>
function mFunction () {
if (!!this.form.checkbox.checked) {
alert('not checked');
return false;
}
};
</script>
js above
<body>
<form>
<input type="checkbox" name="choice1" value="choice1" id="confirm">choice 1<br>
<input type="checkbox" name="choice2" value="choice2" >choice 2<br>
<input type="checkbox" name="choice3" value="choice3">choice 3<br><br>
<input type="submit" value="Submit" onclick="mFunction()">
</form>
I wanted an alert if nothing selected, and no alert if something is selected.
you can check this by
[...document.querySelectorAll("input[type='checkbox']")].some(i=>i.checked)
function mFunction (e)
{
if(![...document.querySelectorAll("input[type='checkbox']")].some(i=>i.checked))
{
alert('not checked');
e.preventDefault();
}
};
function checkForm(t,e) {
e.preventDefault();
console.log('checked');
};
<form onsubmit="checkForm(this,event);">
<input type="checkbox" name="choice1" value="choice1" id="confirm">choice 1<br>
<input type="checkbox" name="choice2" value="choice2" >choice 2<br>
<input type="checkbox" name="choice3" value="choice3">choice 3<br><br>
<input type="submit" value="Submit" onclick="mFunction(event)">
</form>
You can directly check the checked items like below.
function mFunction () {
let matches = document.querySelectorAll('input[type=checkbox]:checked');
if (matches.length < 1) {
alert('not checked');
return false;
}
};
If its plain javascript, you can try adding an event listener when checkbox is clicked.
Maintain an array in the listener. If something is selected maintain a checkbox selection counter or boolean tracking selection.
var checkbox = document.querySelector("input[name=checkbox]");
checkbox.addEventListener( 'change', function() {
if(this.checked) {
// Checkbox is checked..
} else {
// Checkbox is not checked..
}
});

How to disable all checkbox with use of foreach in jQuery

I want to disable all checkbox when click all 'select all'.
How is this possible using jQuery?
JavaScript:
Here categories[] is name of checkbox which is in foreach loop
function checkAll(source) {
checkboxes = document.getElementsByName('categories[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
//checkboxes[i].checked = source.checked;
checkboxes[i].disabled = source.disabled;
}
}
function uncheckAll() {
$('input:checkbox').removeAttr('checked');
}
function disableAll() {
$('input:checkbox').attr('disabled','true');
}
<input type="checkbox" checked>A<br/>
<input type="checkbox" checked>B<br/>
<input type="checkbox">C<br/>
<input type="checkbox" checked>D<br/>
<input type="checkbox">E<br/>
<button onclick="uncheckAll()">Uncheck all</button>
<button onclick="disableAll()">Disable all</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Just use prop('disabled', true)
$('#mainChk').on('click', function(){
var categories = $('.categories');
categories.prop('disabled', !categories.prop('disabled'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="mainChk" type="checkbox" > Main
<input type="checkbox" class="categories"> First
<input type="checkbox" class="categories"> Second
<input type="checkbox" class="categories"> Third
Give all your checkbox a class (ex: class='ck').
Then :
$('.ck').each(function(){
$(this).prop('disabled', true);
})
This will work for you.
<input type="checkbox" checked>A<br/>
<input type="checkbox" checked>B<br/>
<input type="checkbox">C<br/>
<input type="checkbox" checked>D<br/>
<input type="checkbox">E<br/>
<button class="disableAll">Disable all</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".disableAll").click(function(){
$('input[type=checkbox]').each(function(){
$(this).prop('disabled', true);
})
});
});
you can enable disable checkboxes with jquery like this.
$('#checkAll:checkbox').change(function () {
if($(this).attr("checked")) $('input:checkbox').attr('checked','checked');
else $('input:checkbox').removeAttr('checked');
});
Have a look at this demo.

Enable click event when another checkbox is cheched

I need a jQuery function that does the following thing: for example, when checkbox1 is checked, when I click on some other elements (with an id starting with element-) I could print the id of these elements in the console as follows:
$('#checkbox1').click(function() {
if ($(this).is(':checked')) {
$(document).on('click','[id^=element-]', function(e) {
console.log(this.id);
});
} else {}
});
I tested this example and it's not working. I have not idea when I'm wrong.
The simplest way to do this would be to invert your logic. That is to say, place the click handler on the required elements and within that check the state of the checkbox. Try this:
$(document).on('click', '[id^="element-"]', function(e) {
if ($('#checkbox1').is(':checked'))
console.log(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" id="checkbox1" />
Check me!
</label>
<div>
<button id="element-foo">Foo</button>
<button id="element-bar">Bar</button>
</div>
I tested it out, and this will work for you
$("input[id^=d]").on("click", function() {
var id = $(this).prop("id");
if ($("#c1").is(":checked")) {
console.log(id);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Dogs <input id="c1" type="checkbox" />
Cats <input id="d1" type="checkbox" />
Zebras <input id="d2" type="checkbox" />
Rhinos <input id="e1" type="checkbox" />

display data on selecting a checkbox

I have 3 checkboxes
<input type="checkbox" name ="chk[]" id="inlineCheckbox1" value="Permanent">Permanent
<input type="checkbox" name ="chk[]" id="inlineCheckbox2" value="Drive">Drive
<input type="checkbox" name ="chk[]" id="inlineCheckbox3" value="Contract"> Contract
and a div that contains 2 inputs
<div id="datetime">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee" >
</div>
Checkbox Permanent and Contract can be selected normally, but i want that till the time Drive checkbox is not selected, the div should stay disabled, when the user selects Drive, he should be able to select values from div and if he again unchecks the Drive checkbox the div should get disabled again.
I tried to follow this code but it didnt seemed to work for me, can anyone please tell how it can be done
You could disable/enable the time controls like this:
function setDateTimeAvailability() {
var checked = $("#inlineCheckbox2").is(':checked');
$("#datetime input").attr('disabled', !checked);
// Or, if you prefer to hide, do:
// $("#datetime").toggle(checked);
}
$("#inlineCheckbox2").change(setDateTimeAvailability);
// Make sure on page load the datetime availability is set correctly
$(setDateTimeAvailability);
Here is a fiddle.
Try this out:
Required Library: <script
src="//code.jquery.com/jquery-1.11.3.min.js">
$(function() {
HideDiv();
});
$("#inlineCheckbox2").on('change', function() {
HideDiv();
});
function HideDiv() {
if ($("#inlineCheckbox2").is(':checked')) {
$("#datetime").show();
} else {
$("#datetime").hide();
}
}
Try below code :
<head>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
<input type="checkbox" name ="chk[]" id="inlineCheckbox1" value="Permanent">Permanent
<input type="checkbox" name ="chk[]" id="inlineCheckbox2" value="Drive">Drive
<input type="checkbox" name ="chk[]" id="inlineCheckbox3" value="Contract"> Contract
<div id="datetime" style="display:none;">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee" >
</div>
<script>
$("#inlineCheckbox2").change(function(){
if($(this).is(':checked')){
$("#datetime").show();
} else{
$("#datetime").hide();
}
});
</script>
</body>
$(document).ready(function() {
$("#inlineCheckbox2").change(function() {
//dissable if check box not selected
var dissable = !$(this).is(':checked');
//set all .form-controls dissabled
$('.form-control').each(function() {
$(this).attr('disabled', dissable);
});
});
//set initail status
$("#inlineCheckbox2").trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="chk[]" id="inlineCheckbox1" value="Permanent">Permanent
<input type="checkbox" name="chk[]" id="inlineCheckbox2" value="Drive">Drive
<input type="checkbox" name="chk[]" id="inlineCheckbox3" value="Contract">Contract
<div id="datetime">
<input type='text' class="form-control" name="datee">
<input type='text' class="form-control" name="timee">
</div>
Check this one:
<script type="text/javascript">
$(document).ready(function(){
$(".form-control").prop('disabled', true);
$('#inlineCheckbox2').change(function(){
var checked = $("#inlineCheckbox2").is(':checked');
if (checked == true)
{
$(".form-control").prop('disabled', false);
}
else
{
$(".form-control").prop('disabled', true);
}
});
});
Check Here
The shortest way to do this (in terms of code text) is to give the Drive checkbox a jQuery script to run when its value is changed:
onchange=$('#datetime').children().prop('disabled',
!$(this).prop('checked'))
And let the date and time inputs be disabled when the document loads.

Checkbox to toggle all selection

I have this javascript code
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
}
});
And I have this
<form action="" method="POST">
Toggle All :
<input type="checkbox" name="select-all" id="select-all" />
then at my table I have multiple checkbox
<input type="checkbox" name="checkbox-1" id="checkbox-1" value="1"> Select
<input type="checkbox" name="checkbox-2" id="checkbox-2" value="2"> Select
<input type="checkbox" name="checkbox-3" id="checkbox-3" value="3"> Select
<input type="checkbox" name="checkbox-4" id="checkbox-4" value="4"> Select
When I click on toggle all, it does not check checkbox-1 to checkbox-4
What went wrong in my javascript code.
Thanks!! I want to actually do a function that will send all the value of checkbox1-4 by post when they are checked on form submit.
Simply do like this.
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
You do not need to loop through each checkbox to check all.
Demo
Wrap the code in dom ready if your script is in head tag
$(document).ready(function() {
$('#select-all').click(function(event) {
$(':checkbox').prop("checked", this.checked);
});
});

Categories