Tracking the order checkboxes are checked - javascript

I have a dynamically created table that is filled with rows and columns of checkboxes.
Their unique id's are dynamically created as well.
I would like to store the order that the checkboxes are checked by the user in the checkboxs' values.
If a checkbox is unchecked, its value should be reset to "" or to "0".
It doesn't matter how many times a checkbox is checked and unchecked.
I only need the ultimate order, so an incrementing variable should work fine.
For example:
There are checkbox1 - checkbox10 and all their values are initially set to "".
If the user first clicked on checkbox3 its value would be set to "1".
If the user then clicked on checkbox5 its value would be set to "2".
If the user then clicked on checkbox8 its value would be set to "3".
If checkbox3 and checkbox5 were unclicked, their values would be reset to "".
If checkbox3 were checked yet again its value would be set to "4".
It would not matter that there was no checkbox with a value of 1 or 2.

https://jsfiddle.net/a6fm7h9h/
$(document).ready(function() {
var checkboxChecks = 1;
$('input[type=checkbox]').on('change', function() {
var $this = $(this);
if ($this.is(':checked')) {
$this.val(checkboxChecks++);
} else {
$this.val('');
}
});
});
input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="" name="cb1" />
<input type="checkbox" value="" name="cb2" />
<input type="checkbox" value="" name="cb3" />
<input type="checkbox" value="" name="cb4" />
<input type="checkbox" value="" name="cb5" />
<input type="checkbox" value="" name="cb6" />
<input type="checkbox" value="" name="cb7" />
<input type="checkbox" value="" name="cb8" />
<input type="checkbox" value="" name="cb9" />
<input type="checkbox" value="" name="cb10" />

You could do this:
If you don't have jQuery on your website, add this code first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
And then, add this (which should do the trick without any modifications):
<script>
var myCount = [];
$(document).ready(function() {
$("input[type='checkbox']").change(function() {
if($(this).is(":checked")) {
myCount.push($(this).attr('id'));
$(this).val(myCount.indexOf($(this).attr('id'))+1);
}else{
delete myCount[myCount.indexOf($(this).attr('id'))];
$(this).val("");
}
});
});
</script>
Hope this works, let me know!
Cheers

Just drawing from what others posted, this seems to work fine.
$(document).ready(function() {
var checkboxChecks = 10001;
$('.myTablesClass').on('change', 'tr td .myInputsClass', function(){
var $this = $(this);
if ($this.is(':checked')) {
$this.val(checkboxChecks++);
} else {
$this.val('');
}
});
});`

Related

Show multiple checkbox value in text box

What I'm trying to achieve is when I tick a checkbox the value should show in a text box. But with the below code I can't show value in more than one checkbox. It overwrites the old one.
$('#multiselect-drop input').change(function() {
if (this.checked) {
$('#results').val(this.value);
} else {
$('#results').val("");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="results">
<div id="multiselect-drop">
<input type="checkbox" value="Testing the textbox">
<input type="checkbox" value="Testing 2 the textbox">
</div>
So what I want is, show all checked values in the text box with comma-separated. Anyone can help?
You need to get all checkboxes rather than just the one that is checked:
var $inputs = $('#multiselect-drop input');
var $results = $('#results');
$inputs.change(function() {
var values = $inputs.filter(':checked').map(function() {
return this.value;
}).get().join(',');
$results.val(values);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="results">
<div id="multiselect-drop">
<input type="checkbox" value="Testing the textbox">
<input type="checkbox" value="Testing 2 the textbox">
</div>

How display data entered in one text box to another text box on checkbox tick?

I'm trying to reflect data entered in one text box to another text box on checkbox tick. The default state of checkbox is checked. The value should change after it is unchecked and gets checked back again. Even though the code seems to be working, the only output I'm getting is 'on'.
$(".check").click(function() {
if ($(this).is(":checked")) {
$('.add1').val(this.value) === $('.add2').val(this.value);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add2" />
Kindly note that I would like to do this by class.
Here's the fiddle: https://jsfiddle.net/starscream166/n87vLd51/1/
The issue is because this refers to the checkbox. Hence this.value, which you place in the value of the textboxes, it the string 'on'.
To fix this place the val() of .add1 in to .add2, as in the below example. Also note the use of change instead of click when dealing with checkboxes, as it improves accessibility.
$(".check").change(function() {
if (this.checked) {
$('.add2').val($('.add1').val());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add2" />
Please check here: https://jsfiddle.net/4kp3msax/1/
OR you can do the following code.
$(".check").click(function() {
if ($(this).is(":checked")) {
var add1 = $('.add1').val();
$('.add2').val(add1);
}
});
Pass $('.add2').val() the result of $('.add1').val()
.val() can be used to retrieve or assign an input's value. It can be called without a parameter, which will return the string value of the input. Or, it can be called with a parameter which will assign the value to the input.
$(".check").click(function() {
if ($(this).is(":checked")) {
$('.add2').val($('.add1').val());
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add2" />
Works when any of one field data changed
let swt_data = "";
$(".add1").on("change", function() {
swt_data = $(this).val();
})
$(".check").click(function() {
if ($(this).is(":checked")) {
if (swt_data != $('#first').val() != $('#second').val()) {
$('#first').val(swt_data);
$('#second').val(swt_data)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox checked class="check">
<input type="text" id="first" class="add1" />
<input type="text" id="second" class="add1" />

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.

Assign value to checkbox based on order it is checked

I am trying to assign a value of 5 if a checkbox is clicked first and a value of 2 for the second checkbox that is selected. The form is meant to have a primary and secondary selection based on the order that the box is checked. What I have below doesn't seem to work.
<input type="checkbox" class="form" value="2" name="option-1">
<input type="checkbox" class="form" value="2" name="option-2">
<script type="text/javascript">
var firstClick = true;
$('input.form').click(function() {
if(firstClick){
firstClick = 5;
});
</script>
Update:
I tried Samuel's method but the form is still returning a value of 2 for each item.
you forgot to change the flag
you need to set the val in the checkbox
Modified code:
<input type="checkbox" class="form" value="2" name="option-1">
<input type="checkbox" class="form" value="2" name="option-2">
<script type="text/javascript">
var firstClick = true;
$('input.form[type=checkbox]').click(function() {
if(firstClick) {
$(this).val(5);
firstClick = false;
}
});
</script>

display data in a textbox when checkbox is checked

I have three text boxes having id text1, text2, text3 and one checkbox having id check. I am displaying something in first textbox let's say 10. Now if i will check checkbox then automatically "20" will be displayed in the second textbox. Third textbox remains same as it is. If I will display something in 1st and 2nd textboxes, now if i will check checkbox then same "20" will be displayed in 3rd textbox. After checked if in anytime i will uncheck the checkbox then value "20" will also be removed from the textbox(either 2nd or 3rd) Any idea please? Please be easy with me
index.jsp
<input type="checkbox" id="check"/>
<input type="text" id="text1" value="10"/>
<input type="text" id="text2"/>
<input type="text" id="text3"/>
Your question is not easy to understand....
When checkbox is checked the next empty input text have to display '20' value ?
And if checkbox is unchecked last input with '20' is cleared value ?
Add the "checker" class to each input text.
<input type="checkbox" id="check"/>
<input type="text" id="text1" value="10" class="checker"/>
<input type="text" id="text2" class="checker"/>
<input type="text" id="text3" class="checker"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<br/>
<input type="text" id="anotherTB" value="100"/>
Use this jquery script instead of yours
$(document).ready(function(){
$('#check').click(function(){
if($(this).is(':checked'))
{
var stop='';
$('.checker').each(function(){
if($(this).val()=='' && !stop)
{
$(this).val('20');
stop='stop';
// Add something like that to set other textbox values
var add = parseInt($('#anotherTB').val()) + parseInt($(this).val());
$('#anotherTB').val(add);
}
});
}
else if(!$(this).is(':checked'))
{
$('.checker').each(function(){
if($(this).val()=='20')
{
$(this).val('');
}
});
}
});
});
You can see it work here : http://jsfiddle.net/w9hAZ/1/
$('#check').change(function(){if($(this).is(':checked'))$('#text2').val(20);});
If you want to clear the value when it is unchecked use:
$('#check').change(function(){if($(this).is(':checked'))$('#text2').val(20);else $('#text2').val(''); });

Categories