SelectAll checkbox to check only specific column

I have a somewhat working version of a datagrid with 2 columns of checkbox, 1 SelectAll checkbox in the header of second column. The issue right now is when I click the SelectAll, it will check/uncheck all checkbox in the datagrid.

I would like to have the SelectAll checkbox only check/uncheck the column it is in. Can someone help me on this? Thanks!

JavaScript

function SelectAllCheckboxesSpecific(spanChk) {

    var IsChecked = spanChk.checked;

    var Chk = spanChk;

    Parent = document.getElementById('dgPicsUploaded');

    var items = Parent.getElementsByTagName('input');

    for (i = 0; i < items.length; i++) {

        if (items[i].id != Chk && items[i].type == "checkbox") {

            if (items[i].checked != IsChecked) {

                items[i].click();

            }

        }

    }

}

DataGrid

<asp:TemplateColumn>

    <ItemStyle Wrap="true" Width="50px" />

    <HeaderTemplate>

        <asp:Button ID="btnSaveItemID" runat="server" Text="Save Item ID" OnClick="btnSaveItemID_Click" />

    </HeaderTemplate>

    <ItemTemplate>

        <asp:CheckBox ID="select2" runat="server" Checked="false"></asp:CheckBox>

    </ItemTemplate>

</asp:TemplateColumn>

...............

<asp:TemplateColumn>

    <ItemStyle Wrap="true" Width="30px" />

    <HeaderTemplate>

        <asp:CheckBox ID="chkbxSelectAll" Text="Select All" runat="server" onclick="javascript:SelectAllCheckboxesSpecific(this);"></asp:CheckBox>

    </HeaderTemplate>

    <ItemTemplate>

        <asp:CheckBox ID="select" runat="server" Checked="false"></asp:CheckBox>

    </ItemTemplate>

</asp:TemplateColumn>

asked Nov 16 '18 at 0:32

joseph.c

6210

hmmm can you give me a bit more detailed answer? I'm not sure how to do that...

– joseph.c
Nov 16 '18 at 1:39

Strangely, all the existing answers I could find are based on jQuery, gridview or some other library or framework, so I've added a POJS version. The only hard part is getting the column index, after that it's just a selector with forEach.

– RobG
Nov 16 '18 at 1:47

add a comment |

I would like to have the SelectAll checkbox only check/uncheck the column it is in. Can someone help me on this? Thanks!

JavaScript

function SelectAllCheckboxesSpecific(spanChk) {

    var IsChecked = spanChk.checked;

    var Chk = spanChk;

    Parent = document.getElementById('dgPicsUploaded');

    var items = Parent.getElementsByTagName('input');

    for (i = 0; i < items.length; i++) {

        if (items[i].id != Chk && items[i].type == "checkbox") {

            if (items[i].checked != IsChecked) {

                items[i].click();

            }

        }

    }

}

DataGrid

<asp:TemplateColumn>

    <ItemStyle Wrap="true" Width="50px" />

    <HeaderTemplate>

        <asp:Button ID="btnSaveItemID" runat="server" Text="Save Item ID" OnClick="btnSaveItemID_Click" />

    </HeaderTemplate>

    <ItemTemplate>

        <asp:CheckBox ID="select2" runat="server" Checked="false"></asp:CheckBox>

    </ItemTemplate>

</asp:TemplateColumn>

...............

<asp:TemplateColumn>

    <ItemStyle Wrap="true" Width="30px" />

    <HeaderTemplate>

        <asp:CheckBox ID="chkbxSelectAll" Text="Select All" runat="server" onclick="javascript:SelectAllCheckboxesSpecific(this);"></asp:CheckBox>

    </HeaderTemplate>

    <ItemTemplate>

        <asp:CheckBox ID="select" runat="server" Checked="false"></asp:CheckBox>

    </ItemTemplate>

</asp:TemplateColumn>

asked Nov 16 '18 at 0:32

joseph.c

6210

hmmm can you give me a bit more detailed answer? I'm not sure how to do that...

– joseph.c
Nov 16 '18 at 1:39

Strangely, all the existing answers I could find are based on jQuery, gridview or some other library or framework, so I've added a POJS version. The only hard part is getting the column index, after that it's just a selector with forEach.

– RobG
Nov 16 '18 at 1:47

add a comment |

I would like to have the SelectAll checkbox only check/uncheck the column it is in. Can someone help me on this? Thanks!

JavaScript

function SelectAllCheckboxesSpecific(spanChk) {

    var IsChecked = spanChk.checked;

    var Chk = spanChk;

    Parent = document.getElementById('dgPicsUploaded');

    var items = Parent.getElementsByTagName('input');

    for (i = 0; i < items.length; i++) {

        if (items[i].id != Chk && items[i].type == "checkbox") {

            if (items[i].checked != IsChecked) {

                items[i].click();

            }

        }

    }

}

DataGrid

<asp:TemplateColumn>

    <ItemStyle Wrap="true" Width="50px" />

    <HeaderTemplate>

        <asp:Button ID="btnSaveItemID" runat="server" Text="Save Item ID" OnClick="btnSaveItemID_Click" />

    </HeaderTemplate>

    <ItemTemplate>

        <asp:CheckBox ID="select2" runat="server" Checked="false"></asp:CheckBox>

    </ItemTemplate>

</asp:TemplateColumn>

...............

<asp:TemplateColumn>

    <ItemStyle Wrap="true" Width="30px" />

    <HeaderTemplate>

        <asp:CheckBox ID="chkbxSelectAll" Text="Select All" runat="server" onclick="javascript:SelectAllCheckboxesSpecific(this);"></asp:CheckBox>

    </HeaderTemplate>

    <ItemTemplate>

        <asp:CheckBox ID="select" runat="server" Checked="false"></asp:CheckBox>

    </ItemTemplate>

</asp:TemplateColumn>

asked Nov 16 '18 at 0:32

joseph.c

6210

I would like to have the SelectAll checkbox only check/uncheck the column it is in. Can someone help me on this? Thanks!

JavaScript

function SelectAllCheckboxesSpecific(spanChk) {

    var IsChecked = spanChk.checked;

    var Chk = spanChk;

    Parent = document.getElementById('dgPicsUploaded');

    var items = Parent.getElementsByTagName('input');

    for (i = 0; i < items.length; i++) {

        if (items[i].id != Chk && items[i].type == "checkbox") {

            if (items[i].checked != IsChecked) {

                items[i].click();

            }

        }

    }

}

DataGrid

<asp:TemplateColumn>

    <ItemStyle Wrap="true" Width="50px" />

    <HeaderTemplate>

        <asp:Button ID="btnSaveItemID" runat="server" Text="Save Item ID" OnClick="btnSaveItemID_Click" />

    </HeaderTemplate>

    <ItemTemplate>

        <asp:CheckBox ID="select2" runat="server" Checked="false"></asp:CheckBox>

    </ItemTemplate>

</asp:TemplateColumn>

...............

<asp:TemplateColumn>

    <ItemStyle Wrap="true" Width="30px" />

    <HeaderTemplate>

        <asp:CheckBox ID="chkbxSelectAll" Text="Select All" runat="server" onclick="javascript:SelectAllCheckboxesSpecific(this);"></asp:CheckBox>

    </HeaderTemplate>

    <ItemTemplate>

        <asp:CheckBox ID="select" runat="server" Checked="false"></asp:CheckBox>

    </ItemTemplate>

</asp:TemplateColumn>

javascript asp.net

asked Nov 16 '18 at 0:32

joseph.c

6210

asked Nov 16 '18 at 0:32

joseph.c

6210

asked Nov 16 '18 at 0:32

joseph.c

6210

asked Nov 16 '18 at 0:32

joseph.c

6210

asked Nov 16 '18 at 0:32

joseph.c

6210

hmmm can you give me a bit more detailed answer? I'm not sure how to do that...

– joseph.c
Nov 16 '18 at 1:39

Strangely, all the existing answers I could find are based on jQuery, gridview or some other library or framework, so I've added a POJS version. The only hard part is getting the column index, after that it's just a selector with forEach.

– RobG
Nov 16 '18 at 1:47

add a comment |

hmmm can you give me a bit more detailed answer? I'm not sure how to do that...

– joseph.c
Nov 16 '18 at 1:39

Strangely, all the existing answers I could find are based on jQuery, gridview or some other library or framework, so I've added a POJS version. The only hard part is getting the column index, after that it's just a selector with forEach.

– RobG
Nov 16 '18 at 1:47

hmmm can you give me a bit more detailed answer? I'm not sure how to do that...

– joseph.c
Nov 16 '18 at 1:39

Strangely, all the existing answers I could find are based on jQuery, gridview or some other library or framework, so I've added a POJS version. The only hard part is getting the column index, after that it's just a selector with forEach.

– RobG
Nov 16 '18 at 1:47

add a comment |

1 Answer
1

active

oldest

votes

Provided the "select all" checkbox is in the same column as the checkboxes it applies to, you can get the cellIndex of its parent cell, then use that to find and check the checkboxes in the same column. A selector will likely do the job, if not a loop over the relevant rows getting the checkbox in the row.cells[index] checkbox.

Note that cellIndex is zero based, but nth-child starts at 1 so you need to add 1 to the index.

// Get nearest ancestor with tagName at or above node

function getNearest(tagName, node) {

  tagName = tagName.toLowerCase();

  while (node && node.tagName && node.tagName.toLowerCase() != tagName) {

    node = node.parentNode;

  }

  return node && node.tagName && node.tagName.toLowerCase() == tagName? node : null;

}



function checkAllInCol(evt) {

  var node = this;

  var cell = getNearest('th', node);

  if (!cell) return;

  var selector = `td:nth-child(${cell.cellIndex+1})`;

  var table = getNearest('table', cell);

  table.tBodies[0].querySelectorAll(selector).forEach(

    cell => cell.querySelector('input').checked = node.checked

  );

}



window.onload = function() {

  var cells = document.querySelectorAll('th input').forEach(cell => {

    cell.addEventListener('click', checkAllInCol, false);

  });

}

table {

  border-collapse: collapse;

  border-left: 1px solid #bbbbbb;

  border-top: 1px solid #bbbbbb;

}

th, td {

  border-right: 1px solid #bbbbbb;

  border-bottom: 1px solid #bbbbbb;

  text-align: right;

}

<table>

  <thead>

    <tr><th><label>Col 0: <input type="checkbox"></label>

        <th><label>Col 1: <input type="checkbox"></label>

  </thead>

  <tbody>

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox">

  </tbody>

</table>

You should add error checking and validation, e.g. make sure cell.querySelector('input') returns a node before assigning to its checked property.

answered Nov 16 '18 at 1:41

RobG

99.2k19111146

PS. Be careful with NodeList.forEach, it was added recently and may not be supported everywhere. An alternative is a plain loop or Array.from(NodeList).forEach(...).

– RobG
Nov 16 '18 at 1:48

Thanks for the answer, but I end of using a bit of a cheat way to solve the issue. In my IF validation, I added the following && items[i].id.toString().indexOf("select2") == -1

– joseph.c
Nov 16 '18 at 18:39

@joseph.c—if you're going to use that approach, it would be much better to give them a class and select them using that, e.g. document.querySelectorAll('.select2').forEach((el, i, list) => el.checked = list[0].checked).

– RobG
Nov 17 '18 at 5:43

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53329774%2fselectall-checkbox-to-check-only-specific-column%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Note that cellIndex is zero based, but nth-child starts at 1 so you need to add 1 to the index.

// Get nearest ancestor with tagName at or above node

function getNearest(tagName, node) {

  tagName = tagName.toLowerCase();

  while (node && node.tagName && node.tagName.toLowerCase() != tagName) {

    node = node.parentNode;

  }

  return node && node.tagName && node.tagName.toLowerCase() == tagName? node : null;

}



function checkAllInCol(evt) {

  var node = this;

  var cell = getNearest('th', node);

  if (!cell) return;

  var selector = `td:nth-child(${cell.cellIndex+1})`;

  var table = getNearest('table', cell);

  table.tBodies[0].querySelectorAll(selector).forEach(

    cell => cell.querySelector('input').checked = node.checked

  );

}



window.onload = function() {

  var cells = document.querySelectorAll('th input').forEach(cell => {

    cell.addEventListener('click', checkAllInCol, false);

  });

}

table {

  border-collapse: collapse;

  border-left: 1px solid #bbbbbb;

  border-top: 1px solid #bbbbbb;

}

th, td {

  border-right: 1px solid #bbbbbb;

  border-bottom: 1px solid #bbbbbb;

  text-align: right;

}

<table>

  <thead>

    <tr><th><label>Col 0: <input type="checkbox"></label>

        <th><label>Col 1: <input type="checkbox"></label>

  </thead>

  <tbody>

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox">

  </tbody>

</table>

You should add error checking and validation, e.g. make sure cell.querySelector('input') returns a node before assigning to its checked property.

answered Nov 16 '18 at 1:41

RobG

99.2k19111146

PS. Be careful with NodeList.forEach, it was added recently and may not be supported everywhere. An alternative is a plain loop or Array.from(NodeList).forEach(...).

– RobG
Nov 16 '18 at 1:48

Thanks for the answer, but I end of using a bit of a cheat way to solve the issue. In my IF validation, I added the following && items[i].id.toString().indexOf("select2") == -1

– joseph.c
Nov 16 '18 at 18:39

@joseph.c—if you're going to use that approach, it would be much better to give them a class and select them using that, e.g. document.querySelectorAll('.select2').forEach((el, i, list) => el.checked = list[0].checked).

– RobG
Nov 17 '18 at 5:43

add a comment |

Note that cellIndex is zero based, but nth-child starts at 1 so you need to add 1 to the index.

// Get nearest ancestor with tagName at or above node

function getNearest(tagName, node) {

  tagName = tagName.toLowerCase();

  while (node && node.tagName && node.tagName.toLowerCase() != tagName) {

    node = node.parentNode;

  }

  return node && node.tagName && node.tagName.toLowerCase() == tagName? node : null;

}



function checkAllInCol(evt) {

  var node = this;

  var cell = getNearest('th', node);

  if (!cell) return;

  var selector = `td:nth-child(${cell.cellIndex+1})`;

  var table = getNearest('table', cell);

  table.tBodies[0].querySelectorAll(selector).forEach(

    cell => cell.querySelector('input').checked = node.checked

  );

}



window.onload = function() {

  var cells = document.querySelectorAll('th input').forEach(cell => {

    cell.addEventListener('click', checkAllInCol, false);

  });

}

table {

  border-collapse: collapse;

  border-left: 1px solid #bbbbbb;

  border-top: 1px solid #bbbbbb;

}

th, td {

  border-right: 1px solid #bbbbbb;

  border-bottom: 1px solid #bbbbbb;

  text-align: right;

}

<table>

  <thead>

    <tr><th><label>Col 0: <input type="checkbox"></label>

        <th><label>Col 1: <input type="checkbox"></label>

  </thead>

  <tbody>

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox">

  </tbody>

</table>

You should add error checking and validation, e.g. make sure cell.querySelector('input') returns a node before assigning to its checked property.

answered Nov 16 '18 at 1:41

RobG

99.2k19111146

PS. Be careful with NodeList.forEach, it was added recently and may not be supported everywhere. An alternative is a plain loop or Array.from(NodeList).forEach(...).

– RobG
Nov 16 '18 at 1:48

Thanks for the answer, but I end of using a bit of a cheat way to solve the issue. In my IF validation, I added the following && items[i].id.toString().indexOf("select2") == -1

– joseph.c
Nov 16 '18 at 18:39

@joseph.c—if you're going to use that approach, it would be much better to give them a class and select them using that, e.g. document.querySelectorAll('.select2').forEach((el, i, list) => el.checked = list[0].checked).

– RobG
Nov 17 '18 at 5:43

add a comment |

Note that cellIndex is zero based, but nth-child starts at 1 so you need to add 1 to the index.

// Get nearest ancestor with tagName at or above node

function getNearest(tagName, node) {

  tagName = tagName.toLowerCase();

  while (node && node.tagName && node.tagName.toLowerCase() != tagName) {

    node = node.parentNode;

  }

  return node && node.tagName && node.tagName.toLowerCase() == tagName? node : null;

}



function checkAllInCol(evt) {

  var node = this;

  var cell = getNearest('th', node);

  if (!cell) return;

  var selector = `td:nth-child(${cell.cellIndex+1})`;

  var table = getNearest('table', cell);

  table.tBodies[0].querySelectorAll(selector).forEach(

    cell => cell.querySelector('input').checked = node.checked

  );

}



window.onload = function() {

  var cells = document.querySelectorAll('th input').forEach(cell => {

    cell.addEventListener('click', checkAllInCol, false);

  });

}

table {

  border-collapse: collapse;

  border-left: 1px solid #bbbbbb;

  border-top: 1px solid #bbbbbb;

}

th, td {

  border-right: 1px solid #bbbbbb;

  border-bottom: 1px solid #bbbbbb;

  text-align: right;

}

<table>

  <thead>

    <tr><th><label>Col 0: <input type="checkbox"></label>

        <th><label>Col 1: <input type="checkbox"></label>

  </thead>

  <tbody>

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox">

  </tbody>

</table>

You should add error checking and validation, e.g. make sure cell.querySelector('input') returns a node before assigning to its checked property.

answered Nov 16 '18 at 1:41

RobG

99.2k19111146

Note that cellIndex is zero based, but nth-child starts at 1 so you need to add 1 to the index.

// Get nearest ancestor with tagName at or above node

function getNearest(tagName, node) {

  tagName = tagName.toLowerCase();

  while (node && node.tagName && node.tagName.toLowerCase() != tagName) {

    node = node.parentNode;

  }

  return node && node.tagName && node.tagName.toLowerCase() == tagName? node : null;

}



function checkAllInCol(evt) {

  var node = this;

  var cell = getNearest('th', node);

  if (!cell) return;

  var selector = `td:nth-child(${cell.cellIndex+1})`;

  var table = getNearest('table', cell);

  table.tBodies[0].querySelectorAll(selector).forEach(

    cell => cell.querySelector('input').checked = node.checked

  );

}



window.onload = function() {

  var cells = document.querySelectorAll('th input').forEach(cell => {

    cell.addEventListener('click', checkAllInCol, false);

  });

}

table {

  border-collapse: collapse;

  border-left: 1px solid #bbbbbb;

  border-top: 1px solid #bbbbbb;

}

th, td {

  border-right: 1px solid #bbbbbb;

  border-bottom: 1px solid #bbbbbb;

  text-align: right;

}

<table>

  <thead>

    <tr><th><label>Col 0: <input type="checkbox"></label>

        <th><label>Col 1: <input type="checkbox"></label>

  </thead>

  <tbody>

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox">

  </tbody>

</table>

You should add error checking and validation, e.g. make sure cell.querySelector('input') returns a node before assigning to its checked property.

// Get nearest ancestor with tagName at or above node

function getNearest(tagName, node) {

  tagName = tagName.toLowerCase();

  while (node && node.tagName && node.tagName.toLowerCase() != tagName) {

    node = node.parentNode;

  }

  return node && node.tagName && node.tagName.toLowerCase() == tagName? node : null;

}



function checkAllInCol(evt) {

  var node = this;

  var cell = getNearest('th', node);

  if (!cell) return;

  var selector = `td:nth-child(${cell.cellIndex+1})`;

  var table = getNearest('table', cell);

  table.tBodies[0].querySelectorAll(selector).forEach(

    cell => cell.querySelector('input').checked = node.checked

  );

}



window.onload = function() {

  var cells = document.querySelectorAll('th input').forEach(cell => {

    cell.addEventListener('click', checkAllInCol, false);

  });

}

table {

  border-collapse: collapse;

  border-left: 1px solid #bbbbbb;

  border-top: 1px solid #bbbbbb;

}

th, td {

  border-right: 1px solid #bbbbbb;

  border-bottom: 1px solid #bbbbbb;

  text-align: right;

}

<table>

  <thead>

    <tr><th><label>Col 0: <input type="checkbox"></label>

        <th><label>Col 1: <input type="checkbox"></label>

  </thead>

  <tbody>

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox">

  </tbody>

</table>

// Get nearest ancestor with tagName at or above node

function getNearest(tagName, node) {

  tagName = tagName.toLowerCase();

  while (node && node.tagName && node.tagName.toLowerCase() != tagName) {

    node = node.parentNode;

  }

  return node && node.tagName && node.tagName.toLowerCase() == tagName? node : null;

}



function checkAllInCol(evt) {

  var node = this;

  var cell = getNearest('th', node);

  if (!cell) return;

  var selector = `td:nth-child(${cell.cellIndex+1})`;

  var table = getNearest('table', cell);

  table.tBodies[0].querySelectorAll(selector).forEach(

    cell => cell.querySelector('input').checked = node.checked

  );

}



window.onload = function() {

  var cells = document.querySelectorAll('th input').forEach(cell => {

    cell.addEventListener('click', checkAllInCol, false);

  });

}

table {

  border-collapse: collapse;

  border-left: 1px solid #bbbbbb;

  border-top: 1px solid #bbbbbb;

}

th, td {

  border-right: 1px solid #bbbbbb;

  border-bottom: 1px solid #bbbbbb;

  text-align: right;

}

<table>

  <thead>

    <tr><th><label>Col 0: <input type="checkbox"></label>

        <th><label>Col 1: <input type="checkbox"></label>

  </thead>

  <tbody>

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox"> 

    <tr><td><input type="checkbox"><td><input type="checkbox">

  </tbody>

</table>

answered Nov 16 '18 at 1:41

RobG

99.2k19111146

answered Nov 16 '18 at 1:41

RobG

99.2k19111146

answered Nov 16 '18 at 1:41

RobG

99.2k19111146

answered Nov 16 '18 at 1:41

RobG

99.2k19111146

PS. Be careful with NodeList.forEach, it was added recently and may not be supported everywhere. An alternative is a plain loop or Array.from(NodeList).forEach(...).

– RobG
Nov 16 '18 at 1:48

Thanks for the answer, but I end of using a bit of a cheat way to solve the issue. In my IF validation, I added the following && items[i].id.toString().indexOf("select2") == -1

– joseph.c
Nov 16 '18 at 18:39

@joseph.c—if you're going to use that approach, it would be much better to give them a class and select them using that, e.g. document.querySelectorAll('.select2').forEach((el, i, list) => el.checked = list[0].checked).

– RobG
Nov 17 '18 at 5:43

add a comment |

PS. Be careful with NodeList.forEach, it was added recently and may not be supported everywhere. An alternative is a plain loop or Array.from(NodeList).forEach(...).

– RobG
Nov 16 '18 at 1:48

Thanks for the answer, but I end of using a bit of a cheat way to solve the issue. In my IF validation, I added the following && items[i].id.toString().indexOf("select2") == -1

– joseph.c
Nov 16 '18 at 18:39

@joseph.c—if you're going to use that approach, it would be much better to give them a class and select them using that, e.g. document.querySelectorAll('.select2').forEach((el, i, list) => el.checked = list[0].checked).

– RobG
Nov 17 '18 at 5:43

PS. Be careful with NodeList.forEach, it was added recently and may not be supported everywhere. An alternative is a plain loop or Array.from(NodeList).forEach(...).

– RobG
Nov 16 '18 at 1:48

Thanks for the answer, but I end of using a bit of a cheat way to solve the issue. In my IF validation, I added the following && items[i].id.toString().indexOf("select2") == -1

– joseph.c
Nov 16 '18 at 18:39

@joseph.c—if you're going to use that approach, it would be much better to give them a class and select them using that, e.g. document.querySelectorAll('.select2').forEach((el, i, list) => el.checked = list[0].checked).

– RobG
Nov 17 '18 at 5:43

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky