We Keep Coding

By clicking one checkbox other checkbox should be disable

I've 2 columns with checkboxes when one column is checked all respective are checked likewise in 2nd column but the problem is here, client wants when One column of checkbox is checked then 2nd column will be disable or throw alert message to check only one column at a time?
function SelectAll1(headerchk, gridId) {
var gvcheck = document.getElementById(gridId);
var i, j;
if (headerchk.checked) {
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = true;
}
}
}
}
else {
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = false;
}
}
}
}
}
You can ch

I don't really know what you're trying to do without the HTML but here's a start you can build off.
var selected = $('.check:checked').length;
if (selected >= 1) {
$('.check').prop('disabled', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="check" checked="checked">
<input type="checkbox" class="check">
<input type="checkbox" class="check">

From the little info given I assume this:
SelectAll1 clear or set all checkboxes in column 1.
SelectAll2 clear or set all checkboxes in column 2.
headerchk is a checkbox when clicked clears or sets all.
Do this change:
After each line in the code where SelectAll1(headerchk, gridId) is called you change it to SelectAll1(headerchk.checked, gridId).
Insert another line below this line with a negation:
SelectAll2(!headerchk.checked, gridId)
After each line in the code where SelectAll2(headerchk, gridId) is called you change it to SelectAll2(headerchk.checked, gridId).
Insert another line below this line with a negation:
SelectAll1(!headerchk.checked, gridId)
You only showed me the code for SelectAll1, so I assume SelectAll2 is the same when you not yet know how to make them different. Correct me if this is not the fact!
Continue by change the function SelectAll1 to the following:
function SelectAll1(header_checked, gridId) {
var gvcheck = document.getElementById(gridId);
var i, j;
for (i = 0; i < gvcheck.rows.length - 1; i++) {
var inputs = gvcheck.rows[i].getElementsByTagName('input');
for (j = 1; j < inputs.length; j++) {
if (inputs[j].type == "checkbox") {
inputs[j].checked = header_checked;
}
}
}
}
The else-part and if is eliminated by moving the condition to the assignment that is eiher true or false. The .checked part is moved outside the function.
Do the same change in SelectAll2
Test if it works and report to me!

JavaScript Form Validation -

I'm trying to get a basic javascript validation. For some reason it's picking up text and drop downs but not radio buttons? What am I doing wrong?
JS Fiddle
<script>
function validateForm(formId)
{
var inputs, index;
var form=document.getElementById(formId);
inputs = form.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
// deal with inputs[index] element.
if (inputs[index].value==null || inputs[index].value==""))
{
alert("Field is empty");
return false;
}
}
</script>

To validate for radio buttons, You need to go through all radio's and see which one's checked property is true.
<script>
function validateForm(){
for(i=0; i<document.form.radios.length; i++){
if(document.form.radios[i].checked==false){
c=1;
}
else{
c=0;
break;
}}
if(c==1){
alert('Please select an option');
}
}
</script>
document.form.radios.length gives the number of radio buttons.
You can also use HTML's required attribute to achieve the same functionality.
<form>
<input type="radio" name="gender" value="Male" required /> Male
<input type="radio" name="gender" value="Female" /> Female
<input type="submit" name = "sub" value="SAVE" />
</form>
Fiddle

Provided below is an approach you can take to identify if you have multiple radio buttons in your form
function hasEmptyRadio(radioMap) {
var emptyRadio = false;
for (var i in radioMap) {
if (radioMap.hasOwnProperty(i) && !radioMap[i]) {
emptyRadio = true;
break;
}
}
return emptyRadio; // return the radio object or name if required
}
function markEmptyRadios(radioMap, radioObj) {
var checked = radioObj.checked;
radioMap[radioObj.name] = radioMap[radioObj.name] || checked;
}
function validateForm(formId) {
var inputs, index;
var radioMap = {};
var form = document.getElementById(formId);
inputs = form.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
if (inputs[index].type === 'radio') {
markEmptyRadios(radioMap, inputs[index])
}
// Your check for other input type can go here
}
alert("Radio Empty check returned => " + hasEmptyRadio(radioMap));
}

Check/Uncheck all checkboxes in a grid view

I am trying to implement the feature of checking and unchecking all checkboxes in a grid view at once. I created a main checkbox that will be used to check all the checkboxes at once
<input id="main-checkbox" type="checkbox" name="messages-checkall" value="all" checked="checked" onclick='checkedAll();'>
The checkedAll() function is implemeted as follows
<script type='text/javaScript'>
function checkedAll () {
var inputs = document.getElementsByTagName('input');
var checkboxes = [];
if (document.getElementById('main-checkbox').checked === "checked") {check = false} else {check = true};
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'checkbox') {
inputs[i].checked = check;
}
}
}
</script>
but this is not working.
Note - I cannot create a form with all the checkboxes and then handle all the checkboxes in the form.
Please tell if you want other detail.

Change
if (document.getElementById('main-checkbox').checked === "checked") {check = false} else {check = true};
To
var check = document.getElementById('main-checkbox').checked

var objCheckBoxes = document.getElementById('containerId').getElementsByTagName('input');
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
{
objCheckBoxes.checked = true/false;
}
else
{
for(var i = 0; i < countCheckBoxes; i++)
{
objCheckBoxes[i].checked = true/false;
}
}
In html
<ul id="containerId">
<li><input type="checkbox" name="selected" value="Some text description 1"></li>
<li><input type="checkbox" name="selected" value="Some text description 2"></li>
</ul>

Javascript: Detect checked boxes isn't working with form with only 1 checkbox. Working with 2 or more

I have the function below. It gets the values from checked boxes and transfer it to a textbox. It is working... but only if the form has 2 or more checkboxes.
<script type="text/javascript">
function sendValue()
{
var all_values = '';
boxes = document.DataRequest.itens.length
for (i = 0; i < boxes; i++)
{
if (document.DataRequest.itens[i].checked)
{
all_values = all_values + document.DataRequest.itens[i].value + ","
}
}
window.opener.document.getElementById('emailto').value = all_values;
self.close();
}
</script>
<form name="DataRequest">
<input name="itens" type="checkbox" value="name1">
<input name="itens" type="checkbox" value="name2">
</form>
Am I missing something to make this work with only 1 checkbox?

When there is one item. it does not return array
function sendValue()
{
var all_values = '';
boxes = document.DataRequest.itens.length
if(boxes>1)
{
for (i = 0; i < boxes; i++)
{
if (document.DataRequest.itens[i].checked)
{
all_values = all_values + document.DataRequest.itens[i].value + ","
}
}
}
else
{
if (document.DataRequest.itens.checked)
{
all_values = document.DataRequest.itens.value
}
}
window.opener.document.getElementById('emailto').value = all_values;
self.close();
}

First, you need to give different names to your inputs :
<form name="DataRequest">
<input name="item1" type="checkbox" value="name1">
<input name="item2" type="checkbox" value="name2">
</form>
Using the same name to your inputs is technically possible in your case but a terrible practice as the name is normally what's identify for a form the different inputs.
Then, to access your inputs, you must use a different syntax. More than one version are possible but you can do this :
var boxes = document.forms['DataRequest'].getElementsByTagName('input');
var tokens = [];
for (var i=0; i<boxes.length; i++) {
if (boxes[i].checked) tokens.push(boxes[i].name+'='+boxes[i].value);
}
var all_values = tokens.join(',');
Note that the use of join avoids the trailing comma.

not sure how much compatibility you need with IE 6 - 8, but if that's not required you can use
function serializeChecked() {
var values = [];
var checked_boxes = document.querySelectorAll('form[name="DataRequest"] input[checked]');
for (var i = 0, l = checked_boxes.length; i < l; i++) {
values.push(checked_boxes[i].getAtrribute('value'))
}
return values.join(',');
}
function sendValue() {
window.opener.document.getElementById('emailto').value = serializeChecked();
}
If you do require IE support, use document.DataRequest.getElementsByTagName('input') instead of QSA and iterate through them to collect the values if they have the checked attribute.

How to manipulate form field values in javascript

I'm trying to get the value of a few checkboxes and enter them in a hidden form field.
My checkboxes look like this:
<form>
<input type="checkbox" name="chicken" id="chicken" value="chicken"/>Chicken
<input type="checkbox" name="meat" id="meat" value="meat"/>Meat
</form>
<form method="post" action="">
<input type="hidden" name="my-item-name" value="" />
<input type="submit" name="my-add-button" value=" add " />
</form>
I only need to submit the hidden field data so I'd like the value of the hidden field change when the checkbox is ticked. So if the first checkbox is ticked I'd like the value of the hidden field to become chicken and if both of them are ticked the value should be chicken,meat.
I'm using the following javascript
function SetHiddenFieldValue()
{
var checks = document.getElementsByName("checkbox");
var hiddenFieldVal = "";
for(i = 0; i < checks.length; i++)
{
if(hiddenFieldVal != "")
hiddenFieldVal += ",";
hiddenFieldVal += checks[i].value;
}
document.getElementById('my-item-name').value = hiddenFieldVal;
}
but when I add the items, it adds both of them, it doesn't check which one's been checked, is there a way to fix that, so when the first item is checked it'll only add that item and if both of them are checked, it'll add 2 items separated by comma,

for(i = 0; i < checks.length; i++)
{
if (!checks[i].checked)
continue;
....
}

You need to give the checkboxes the same name to have them grouped:
<input type="checkbox" name="food[]" id="chicken" value="chicken"/>Chicken
<input type="checkbox" name="food[]" id="meat" value="meat"/>Meat
And in your JavaScript function:
function SetHiddenFieldValue() {
var checks = document.getElementsByName("food[]");
var hiddenFieldVal = "";
for (var i=0; i<checks.length; i++) {
if (checks[i].checked) {
if (hiddenFieldVal != "")
hiddenFieldVal += ",";
hiddenFieldVal += checks[i].value;
}
}
document.getElementById('my-item-name').value = hiddenFieldVal;
}

You forgot to test for checks[i].checked
function SetHiddenFieldValue() {
var checks = document.getElementsByName("checkbox");
var hiddenFieldVal = "";
for(i = 0; i < checks.length; i++) {
if (checks[i].checked) {
if(hiddenFieldVal != "")
hiddenFieldVal += ",";
hiddenFieldVal += checks[i].value;
}
}
}
document.getElementById('my-item-name').value = hiddenFieldVal;
}

Hi your best to put the values into an array, makes it easier to then create the comma separated value. Also makes it a lot easier if you add more options later.
function SetHiddenFieldValue()
{
var checks = document.getElementsByName("checkbox");
var foods = new Array();
for (i = 0; i < checks.length; i++)
{
if (checks[i].checked)
{
foods[i] = checks[i].value;
}
}
document.getElementById('my-item-name').value = foods.join(",");
}