We Keep Coding

How to store value of checked item in arrayList using javascript/jquery?

Before I had used the class for getting the value of checked checkbox storing in array.
<div class="form-check">
<div class="form-group">
<label> <input id="check_id" type="checkbox"
value=1 class="chk" /> <span>Invoice</span>
</label>
<label> <input id="check_id" type="checkbox"
value=2 class="chk" /> <span>Packing List</span>
</label>
</div>
</div>
And it was successfully stored in array as :
$(".chk").click(function() {
getValueUsingClass();
});
function getValueUsingClass(){
$(':checkbox:checked').each(function(i){
chkArray[i] = $(this).val();
});
}
It was working fine until i changed the class name from .chk1 and .chk2. So I needed to change the class to chk1 and chk2
<div class="form-check">
<div class="form-group">
<label> <input id="check_id" type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input id="check_id" type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div>
There may be more than these 2 checkboxes(I have only shown 2 as it is dynamic) there may be checkbox from .chk1 to .chk15 .How can i store checked checkbox in array when their class name is different?

Try this code
$("input[class^=chk]").click(function() {
$('#result').html(getValueUsingClass().join(" | "));
});
function getValueUsingClass(){
var arr = [];
$(':checkbox:checked').each(function(){
arr.push($(this).val());
});
return arr;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<div class="form-group">
<label> <input id="check_id1" type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input id="check_id2" type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div><div id="result"></div>
Please let me know your views over it.

Try using the Starts with from jQuery Starts with selector.
You can use this as $(input[class^='chk'])
$('input[class^="chk"]').click(function() {
var arr = getValueUsingClass();
console.log(arr);
});
function getValueUsingClass() {
var chkArray = [];
$('input[class^="chk"]:checkbox:checked').each(function(i) {
chkArray[i] = $(this).val();
});
return chkArray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="form-check">
<div class="form-group">
<label> <input type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div>

You can use jQuery's Attribute Starts With Selector that selects elements that have the specified attribute with a value beginning exactly with a given string.
Please Note: The attribute id must be unique in a document.
$("input[class^=chk]").click(function() {
getValueUsingClass();
});
function getValueUsingClass(){
var chkArray = [];
$(':checkbox:checked').each(function(i){
chkArray.push($(this).val());
});
console.log(chkArray);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<div class="form-group">
<label> <input id="check_id1" type="checkbox"
value=1 class="chk1" /> <span>Invoice</span>
</label>
<label> <input id="check_id2" type="checkbox"
value=2 class="chk2" /> <span>Packing List</span>
</label>
</div>
</div>

you can achieve this without any class name:
function getValueUsingClass(){
$('input[type="checkbox"]:checked').each(function(i){
chkArray[i] = $(this).val();
});
}

Enable both submit button on checkbox click

I used two forms in a single page but when I click on checkbox then both submit buttons are active but both are different.
I want to click on form one checkbox then the only form one submit button active and then I click on form two checkbox then the only form two submit button active.
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
<h1>form one</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>
<h1>form two</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>

You can do that searching relatively for submit button and enabling only the closest one you find:
var checkboxes = $('input[type="checkbox"]');
checkboxes.on('click', function(e) {
$(this).closest('form')
.find('input[type="submit"]')
.prop("disabled", !$(this).is(":checked"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>form one</h1>
<form>
<div>
<input type="checkbox" name="option-0" id="option-0"> <label for="option-0">Option 0</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>
<h1>form two</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>

The easiest way is to simply find the the submit <input> elements within the same <form> ancestor:
$('input[type=checkbox]').on('change', function(){
$(this).closest('form').find('input[type=submit]').prop('disabled', !this.checked);
});
$('input[type=checkbox]').on('change', function() {
$(this).closest('form').find('input[type=submit]').prop('disabled', !this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>form one</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>
<h1>form two</h1>
<form>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>
Note that, in your HTML, I also corrected the duplicated id of the two <input> elements (and changed the name properties also).

Jquery uncheck checkboxes siblings on check

I would like to have just one checkbox checked at the same time.
I would like to have the value checked.
It works if I remove all div tag but I need to have div tag for the organisation.
So my js code :
$('.myCheckbox').click(function() {
$(this).siblings('input:checkbox').prop('checked', false);
var value = $(this).val();
console.log("value = "+value);
});
And my html code which works without div but not with div :
<div id="id_1" class='class_1'>
<div id="id_a" class='class_a'>
<div>
<img src="fr.png">
<input type="checkbox" class="myCheckbox" value="fr" />
</div>
<div>
<img src="cs.png">
<input type="checkbox" class="myCheckbox" value="cs" />
</div>
<div>
<img src="en.png">
<input type="checkbox" class="myCheckbox" value="en" />
</div>
</div>
<div id="id_b" class='class_b'>
<div>
<img src="bc.png">
<input type="checkbox" class="myCheckbox" value="bc" />
</div>
<div>
<img src="tl.png">
<input type="checkbox" class="myCheckbox" value="tl" />
</div>
<div>
<img src="jk.png">
<input type="checkbox" class="myCheckbox" value="jk" />
</div>
</div>
</div>

$('.myCheckbox').click(function() {
$('.myCheckbox').prop('checked', false);
$(this).prop('checked') ? $(this).prop('checked', false) : $(this).prop('checked', true);
var value = $(this).val();
console.log("value = "+value);
});

You current situation is perfect candidate for use of radios instead, you need to group them by name:
<div id="id_1" class='class_1'>
<div id="id_a" class='class_a'>
<div>
<img src="fr.png">
<input type="radio" name='langa' class="myRadio" value="fr" />
</div>
<div>
<img src="cs.png">
<input type="radio" name='langa' class="myRadio" value="cs" />
</div>
<div>
<img src="en.png">
<input type="radio" name='langa' class="myRadio" value="en" />
</div>
</div>
<div id="id_b" class='class_b'>
<div>
<img src="bc.png">
<input type="radio" name='langb' class="myRadio" value="bc" />
</div>
<div>
<img src="tl.png">
<input type="radio" name='langb' class="myRadio" value="tl" />
</div>
<div>
<img src="jk.png">
<input type="radio" name='langb' class="myRadio" value="jk" />
</div>
</div>
</div>
Then you can use this script:
$('.myRadio').change(function() {
var value = $(this).val(); // this will get you the checked radio value.
console.log("value = "+value);
});

Define checkboxes with same name like
<input type="checkbox" class="myCheckbox" value="bc" name="common_name" />

First find the parent siblings then:
$('.myCheckbox').click(function() {
$(this).parent().siblings().find('input:checkbox').prop('checked', false);
});

By definition checkboxes are used when you want to give the option to select multiple options to the user. If you want him to select only one value use radios instead :)
Example -
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
But if this has to be done by checkboxes you can try this :)
<input type = "checkbox" name = "sample" value = "1">firsr
<input type = "checkbox" name = "sample" value = "2">second
<input type = "checkbox" name = "sample" value = "3">third
Javascript
$(document).ready(function() {
$('input[name=sample]').click(function(e){
$( "input[name=sample]").prop('checked', false);
$(this).attr('checked','checked')
})
});

Enabling Submit Button after clicking checkbox

I have been struggling with getting the following code to work (example taken from jsfiddle after looking at responses in this forum.
Can anyone see where I'm going wrong?
<script type="text/javascript">
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>

JQuery update input value based on another form input

I have the following fields on a form and was wondering if it is possible to update the hidden input field (itemValue) value based on the user selection from radio buttons? So that the hidden field input value will be equal to the value of the selected radio button...Any example is highly appreciated. Thanks
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item1" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item2" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item3" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item4" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>

Your radio buttons are currently all independent of each other, meaning that you can quite literally select all 4 of them at the same time. In order to get them to work together (so you can only ever select one at any given time), you'll need to give them all an identical name. For example:
<input type="radio" id="item1" name="item" value="5"/>
...
<input type="radio" id="item2" name="item" value="10"/>
Notice how these both have a name of "item"?
Once you've done that, you can use jQuery like this:
$('[name="item"]').on('change', function() {
$('[name="itemValue"]').val($(this).val());
});
JSFiddle demo. (Note that I've used a text input element rather than a hidden one to easily show you that the value changes.)

$("input[type=radio]").change(function () {
if ($(this).prop(":checked")) {
$('#yourId').val($(this).val())
}
});

<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
JQuery>
$(function(){
$("input[name='item']").change(function(){
$("input[name='itemValue']").val($(this).val());
alert($("input[name='itemValue']").val());
});
});

$('input:radio').change(function () {
if (this.checked) {
$('#hidfld').val($(this).val()));
}
});