Update textboxes based on checkboxes Jquery - javascript

I want to achieve following thing with Jquery
There are multiple trips and each trip has checkbox and textbox.
Whenever checkbox is checked then the value in textbox corresponding to that checkbox must be updated to "1" .
ehenever customer types in textbox then checkbox shall be checked.
Customer is not allowed to choose more than 10 trips in total. (i.e. if both input box total is 10 then there shall be error or alert shown.
I tried by following code but it is not working
<input type="checkbox" id="ckval1" class="checkvaloare" /> Trip 1
<input type="text" id="text1" class="ckval1" size="2" />
<br />
<input type="checkbox" id="ckval2" class="checkvaloare" /> Trip 2
<input type="text" id="text2" class="ckval2" size="2" />
JQuery as below:
$("input[type=checkbox]").click(function () {
update();
});
function update() {
$("input[type=text]").each(function () {
if (($(this).is(":checked"))) {
$(this).val(1);
}
else
{
$(this).val(0);
}
});
}

use .next() get next sibling element and .prev() get previous sibling element.
try
$(function () {
$("input[type=checkbox]").on('click', function () {
$(this).next().val($(this).is(':checked') ? '1' : '0');
});
$("input[type=text]").on('keyup', function () {
if (+ $(this).val()) {
alert('f');
$(this).prev().prop('checked', true);
} else {
$(this).prev().prop('checked', false);
}
});
});
Demo: http://jsfiddle.net/tamilcselvan/m242bo5z/2/

Two issues:
you can change a checkbox without clicking it
in your function, you are using $this) to refer to the checkbox, but it refers to the text input
Try something like this:
$("input[type=checkbox]").change(function (e) {
update(e.target);
});
function update(el) {
$("input[type=text]").each(function () {
if (($(el).is(":checked"))) {
$(this).val(1);
}
else
{
$(this).val(0);
}
});
}

Related

Trying to get a child check boxes to clear when the parent is unchecked

I cannot figure how to get the child check-boxes to clear once the parent one is unchecked. So for instance I check US and it opens up the Buildings like LA and etc... then if I check LA it opens up departments like Shipping etc.. I want it so they all can clear if the previous one is unchecked. I hope this is clear what I am trying to achieve. I will try and continue to figure it out and post the answer if I get it working.
criteria_form.php
<!DOCTYPE html>
<html>
<head>
<title>Checkbox</title>
</head>
<body>
<h3>Checkbox Example with Javascript</h3>
<input type="checkbox" name="us"><label
name="us_lbl">US</label>
<input type="checkbox" name="building"><label name="bld_lbl">Building</label>
<input type="checkbox" name="department"><label name="dep_lbl">Department</label>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</body>
</html>
js
<script>
$(function () {
$('input[name="building"]').hide();
//show it when the checkbox is clicked
$('input[name="us"]').on('click', function () {
if ($(this).prop('checked')) {
$('input[name="building"]').fadeIn();
} else {
$('input[name="building"]').hide();
}
});
});
$(function () {
$('label[name="bld_lbl"]').hide();
//show it when the checkbox is clicked
$('input[name="us"]').on('click', function () {
if ($(this).prop('checked')) {
$('label[name="bld_lbl"]').fadeIn();
} else {
$('label[name="bld_lbl"]').hide();
}
});
});
$(function () {
$('input[name="department"]').hide();
//show it when the checkbox is clicked
$('input[name="building"]').on('click', function () {
if ($(this).prop('checked')) {
$('input[name="department"]').fadeIn();
} else {
$('input[name="department"]').hide();
}
});
});
$(function () {
$('label[name="dep_lbl"]').hide();
//show it when the checkbox is clicked
$('input[name="building"]').on('click', function () {
if ($(this).prop('checked')) {
$('label[name="dep_lbl"]').fadeIn();
} else {
$('label[name="dep_lbl"]').hide();
}
});
});
</script>
fiddle
function onCheckboxClick(elt){
if(!elt.checked){
var currentLevel = elt.className.split('-')[1]; // Returns the level of the current checkbox
var childBoxes = document.getElementsByClassName('level-'+(++currentLevel));
for(var i = 0; i< childBoxes.length;i++){
childBoxes[i].checked=false;
onCheckboxClick(childBoxes[i]); // recursively go through next levels
}
}
}
So basically you would have this function on the click event of all checkboxes that have children.
and have the levels set as classes to each set of children
in your case:
<input type="checkbox" onclick="onCheckboxClick(this)" name="us" class="level-1"><label name="us_lbl">US</label>
<input type="checkbox" onclick="onCheckboxClick(this)" name="building" class="level-2"><label name="bld_lbl">Building</label>
<input type="checkbox" onclick="onCheckboxClick(this)" name="department" class="level-3"><label name="dep_lbl">Department</label>
and what the function will do is extract the current level number, and gather all the children checkboxes in an array by adding 1 to the level, and then programmatically uncheck them.
You could alternatively define a custom attribute on your dom if you intend to use classes later.

If input has value and radio button is checked remove disabled class from anchor tag

I'm trying to achieve condition, when input has value greater than 1 and radio button is checked then remove disabled class from the anchor.
This is my code
<input name="age" id="age" type="text">
<input name="education" type="radio" value="univeristy">
Calculate
$("input").keyup(function () {
if ($("#age").val().length > 1 && $('input[name=education]:checked')) {
$("#diploma").removeClass("disabled");
} else {
$("#diploma").addClass("disabled");
}
});
It is triggering after input has value without checking radio is checked.
Can anyone help me with this?
Thanks in advance.
Using :checked is fine. But it doesn't return a boolean. You need to check that it returns an element. $(':prop').length > 0 (or using prop('checked')).
Some other stuff you need to change.
The condition should not be on the $("#age").val().length but on the $("#age").val() itself.
Use checkbox, not radiobutton. radiobutton is used to choose one option from others, not to set true/false.
You need to check the values on input keyup, but also on change of the radio (or checkbox).
Try this:
$("input").keyup(function () {
if ($("#age").val().length > 1 && $("input[name='education']").is(':checked')) {
$("#diploma").removeClass("disabled");
} else {
$("#diploma").addClass("disabled");
}
});
Use prop('checked') to check radio, refer code below,
$( document ).ready(function() {
$("input").keyup(function () {
if ($("#age").val().length > 1 && $("input[name='education'][value='univeristy']").prop("checked")) {
$("#diploma").removeClass("disabled");
console.log("Removed class 'disabled'");
} else {
$("#diploma").addClass("disabled");
console.log("Added class 'disabled'");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<input name="age" id="age" type="text">
<input name="education" type="radio" value="univeristy">
Calculate
</body>
Run this code and see console log.

Checkbox fire a function if checked and a different function if not checked

Hi i have got a checkbox and when i click it and check the box a function runs, which works just how i want it to.. now i want to run a DIFFERENT function if it is checked off but it is just running the same function everytime.
<input type="checkbox" class="no-custom" onclick="CheckBox()">
function CheckBox() {
$("#emailMain").css({"display": "none"});
$("#emailSame").css({"display": "inline"});
var Mainemail = Customer().email['#text']();
Contact().email = Mainemail;
EmailHolder(Mainemail);
}
Any ideas in the best way to sort this?
Firstly, if you've included jQuery in your page you should use it to attach your events as its a better separation of concerns. You can then use the checked property of the element to determine which function to call:
<input type="checkbox" class="no-custom" />
$('.no-custom').change(function() {
if (this.checked) {
// do something...
}
else {
// do something else...
}
});
Add an ID to the checkbox:
<input type="checkbox" id="the-checkbox" class="no-custom" onclick="CheckBox()">
Then add an event listener for when it changes:
$(function() {
$('#the-checkbox').change(function() {
if($(this).is(':checked')) {
oneFunction();
}
else {
anotherFunction();
}
});
function oneFunction() {
}
function anotherFunction() {
}
});
You can easily check if the checkbox is checked using jQuery is.
<input type="checkbox" class="no-custom" onclick="CheckBox(this)">
function CheckBox(cb) {
if ($(cb).is(":checked")) {
alert("Checked");
CheckedFunction();
} else {
alert("Unchecked");
UncheckedFunction
}
}

Optimize jQuery small script for checkboxes

I made a small verification script which is supposed to act like this:
I have 4 checkboxes, one has a particular way of action, the id of this checkbox is chx0
If I checked the chx0 checkbox then it released all the others checked checkboxes
If I checked one of all the others checkboxes then it released the chx0 one
Here is my code:
<script type="text/javascript">
$(document).ready(function() {
$('#chx0').click(function() { // click on the chx0 checkbox
if ($('#chx0').attr('checked')) {
$('#chx1').attr('checked', false);
$('#chx2').attr('checked', false);
$('#chx3').attr('checked', false);
}
});
$('#chx1').click(function() {// click on the chx1 checkbox
if ($('#chx1').attr('checked')) {
$('#chx0').attr('checked', false);
}
});
$('#chx2').click(function() { // click on the chx2 checkbox
if ($('#chx2').attr('checked')) {
$('#chx0').attr('checked', false);
}
});
$('#chx3').click(function() { // click on the chx3 checkbox
if ($('#chx3').attr('checked')) {
$('#chx0').attr('checked', false);
}
});
});
</script>
This code is working pretty well it just to get more good practice!
I'd put a class on each checkbox
<input type="checkbox" name="chx0" id="chx0" class="checkbox-group singleton">
<label for="chx0">Check me out!</label>
<input type="checkbox" name="chx1" id="chx1" class="checkbox-group">
<label for="chx1">Check us out!</label>
<input type="checkbox" name="chx2" id="chx2" class="checkbox-group">
<label for="chx2">Check them out!</label>
Then with your jQuery you can do
$('input.checkbox-group').each( function() {
$(this).click( function() {
if ( $(this).hasClass('singleton') ) {
$('input.checkbox-group:checked').removeAttr('checked');
} else {
$('input.checkbox-group.singleton').removeAttr('checked');
}
};
});
Untested, but I think something like that should work. I can't remember if it's better to use the change event rather than click.
You could combine the clauses for all the individual checkboxes, something like
$('#chx1','#chx2','#chx3').click(function() {
if ($(this).attr('checked')) {
$('#chx0').attr('checked', false);
}
});
instead of one per checkbox. Also in the one for "chx0", you can use $(this) instead of $('#chx0')
I came up with something similar to ianbarker. Rather than assume dependencies are all or nothing I used a custom data tag to list the dependencies.
A working example is on jsfiddle here
$('.luckyChecks').click(function() { // click on ANY lucky checkbox
var $t = $(this);
if($t.attr('checked')){
var clear = $t.attr("data-clear").split(",");
for(var i=0; i < clear.length; i++){
$('#'+clear[i]).attr('checked',false);
}
}
});
HTML:
<input type="checkbox" id="chx0" class="luckyChecks" data-clear="chx1,chx2,chx3" />
Diamonds <br />
<input type="checkbox" id="chx1" class="luckyChecks" data-clear="chx0"/>
Clovers <br />
...

Need to enable/disable a button on click of checkbox

I am trying to disable a order button when the page loads and enable it when one checks the Terms and condition checkbox. I have it working where the order button is disabled when the page loads but on the click of checkbox the button doesnt get enabled. Here is my code. Can anyone help me identify the problem
<input type="checkbox" id="checkbox1" name="checkbox1" class="required" />Please read the Terms and Conditions
Jquery Code
var j$ = jQuery.noConflict();
j$(document).ready(function(){
alert("Hi");
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
j$('#checkbox1').change(function(){
if(j$('input[name="checkbox1"]').is(":checked")
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
});
Thanks
Prady
The code you provided had some missing ( and {, here is an updated version with some changes to handle the checkbox state properly:
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var checkbox1 = j$('#checkbox1');
var order = j$('input[name="Order"]');
var verifyChecked = function() {
if (checkbox1.is(":checked") === false) {
order.attr('disabled', 'disabled');
} else {
order.removeAttr('disabled');
}
};
verifyChecked();
checkbox1.change(verifyChecked);
});
Here is a jsfiddle with it working:
http://jsfiddle.net/7uRf6/4/
You have missed a closing parenthesis
if(j$('input[name="checkbox1"]').is(":checked")
should be
if(j$('input[name="checkbox1"]').is(":checked"))
Also you can use an id selector instead of this attribue selector.
And if you want to enable the button when the checkbox is checked you have to
if(!j$('input[name="checkbox1"]').is(":checked"))
in your change event,
if(j$('input[name="checkbox1"]').is(":checked")
it should be
if(j$('input[name="checkbox1"]').not(":checked")
I suggest you to create a function to check it.
var j$ = jQuery.noConflict();
j$(document).ready(function(){
ToggleButton();
j$('#checkbox1').change(ToggleButton);
});
function ToggleButton()
{
if(j$('input[name="checkbox1"]').not(":checked"))
{
j$('input[name="Order"]').attr('disabled', 'disabled');
}
else
{
j$('input[name="Order"]').removeAttr('disabled');
}
}
<script src="jquery.js"></script>
<script>
$(document).ready(function (){
$('#ch').click(
function (){
if($(this).is(':checked')){
$('#bt').attr('disabled','disabled');
}
else {
// remove
$('#bt').removeAttr('disabled');
}
}
)
})
</script>
<input type="button" value="button" id="bt"/>
<input type="checkbox" id="ch"/>

Categories