How can I select an element by name with jQuery

Question

Have a table column I m trying to expand and hide      jQuery seems to hide the td elements when I select it by class but not by element s name       For example  why does          bold   hide       selecting by class works     tcol1   hide       select by element name does not work      Note the HTML below  the second column has the same name for all rows   How could I create this collection using the name attribute      lt tr gt            lt td gt data1 lt  td gt        lt td name  tcol1  class  bold  gt  data2 lt  td gt    lt  tr gt    lt tr gt            lt td gt data1 lt  td gt        lt td name  tcol1  class  bold  gt  data2 lt  td gt    lt  tr gt      lt tr gt            lt td gt data1 lt  td gt        lt td name  tcol1  class  bold  gt  data2 lt  td gt    lt  tr gt

User · Answer

Here s a simple solution     td name tcol1

User · Answer

You can use any attribute as selector with  attribute name value       td name tcol1    hide

User · Answer

I ve done like this and it works       name  tcol1       https   api jquery com attribute-equals-selector

User · Answer

Any attribute can be selected using  attribute name value  way  See the sample here   var value       name  nameofobject

User · Answer

Frameworks usually use bracket names in forms  like    lt input name user first name    gt    They can be accessed by      in JS  this querySelectorAll   name  user first name          in jQuery      name  user first name          or by mask with escaped quotes  this querySelectorAll   name     first name

User · Answer

Performance Today  2020 06 16  I perform tests for chosen solutions on MacOs High Sierra on Chrome 83 0  Safari 13 1 1 and Firefox 77 0  Conclusions Get elements by name  getElementByName  C  is fastest solution for all browsers for big and small arrays - however I is probably some kind of lazy-loading solution or It use some internal browser hash-cache with name-element pairs mixed js-jquery solution  B  is faster than querySelectorAll  D  solution pure jquery solution  A  is slowest  Get rows by name and hide them  we exclude precalculated native solution  I  - theoretically fastest  from comparison - it is used as reference   surprisingly the mixed js-jquery solution  F  is fastest on all browsers surprisingly the precalculated solution  I  is slower than jquery  E F  solutions for big tables       - I check that  hide   jQuery method set style  quot default none quot  on hidden elements - but it looks that they find faster way of do it than element style display  none  jquery  E  solution is quite-fast on big tables jquery  E  and querySelectorAll  H  solutions are slowest for small tables getElementByName  G  and querySelectorAll  H  solutions are quite slow for big tables   Details I perform two tests for read elements by name  A B C D  and hide that elements  E F G H I   small table - 3 rows - you can run test HERE big table - 1000 rows - you can run test HERE  Snippet below presents used codes  x000D   x000D    https   stackoverflow com questions 1107220 how-can-i-select-an-element-by-name-with-jquery      https   jsbench me o6kbhyyvib 1    https   jsbench me 2fkbi9rirv 1  function A       return     name tcol1        function B       return   document getElementsByName  tcol1       function C       return document getElementsByName  tcol1      function D       return document querySelectorAll   name tcol1       function E           name tcol1    hide       function F         document getElementsByName  tcol1    hide       function G       document getElementsByName  tcol1   forEach e  gt e style display  none        function H       document querySelectorAll   name tcol1    forEach e  gt e style display  none        function I       let elArr       document getElementsByName  tcol1       let length   elArr length   for let i 0  i lt length  i    elArr i  style display  none            -----------    TEST    -----------  function reset        td name tcol1    show         A B C D  forEach f  gt  console log    f name  rows    f   length       x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 5 1 jquery min js  gt  lt  script gt   lt div gt This snippet only presents used codes lt  div gt   lt table gt     lt tr gt             lt td gt data1 lt  td gt         lt td name  tcol1  class  bold  gt  data2 lt  td gt     lt  tr gt     lt tr gt             lt td gt data1 lt  td gt         lt td name  tcol1  class  bold  gt  data2 lt  td gt     lt  tr gt       lt tr gt             lt td gt data1 lt  td gt         lt td name  tcol1  class  bold  gt  data2 lt  td gt     lt  tr gt   lt  table gt    lt button onclick  E    gt E  hide lt  button gt   lt button onclick  F    gt F  hide lt  button gt   lt button onclick  G    gt G  hide lt  button gt   lt button onclick  H    gt H  hide lt  button gt   lt button onclick  I    gt I  hide lt  button gt  lt br gt   lt button onclick  reset    gt reset lt  button gt  x000D   x000D   x000D   Example results on Chrome

User · Answer

You forgot the second set of quotes  which makes the accepted answer incorrect      td name  tcol1

User · Answer

You can get the name value from an input field using name element in jQuery by    x000D   x000D  var firstname   jQuery   form1 input name firstname    val      Returns ABCD x000D  var lastname   jQuery   form1 input name lastname    val      Returns XYZ  x000D  console log firstname   x000D  console log lastname   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt form name  form1  id  form1  gt  x000D     lt input type  text  name  firstname  value  ABCD   gt  x000D     lt input type  text  name  lastname  value  XYZ   gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

Personally  what I ve done in the past is give them a common class id and used that to select them  It may not be ideal as they have a class specified that may not exist  but it makes the selection a hell of a lot easier  Just make sure you re unique in your classnames   i e  for the example above I d use your selection by class  Better still would be to change the class name from bold to  tcol1   so you don t get any accidental inclusions into the jQuery results  If bold does actually refer to a CSS class  you can always specify both in the class property - i e   class  tcol1 bold     In summary  if you can t select by Name  either use a complicated jQuery selector and accept any related performance hit or use Class selectors   You can always limit the jQuery scope by including the table name i e           tableID    bold    That should restrict jQuery from searching the  world    Its could still be classed as a complicated selector  but it quickly constrains any searching to within the table with the ID of   tableID   so keeps the processing to a minimum   An alternative of this if you re looking for more than 1 element within  table1 would be to look this up separately and then pass it to jQuery as this limits the scope  but saves a bit of processing to look it up each time   var tbl       tableID    var boldElements       bold  tbl   var rows      tr  tbl   if  rows length       var row1   rows 0       var firstRowCells      td  row1

User · Answer

You can use the function   get elementbyId

User · Answer

You could get the array of elements by name the old fashioned way and pass that array to jQuery    x000D   x000D  function toggleByName     x000D    var arrChkBox   document getElementsByName  chName    x000D      arrChkBox  toggle    x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt html gt  x000D     lt head gt  x000D       lt title gt sandBox lt  title gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt input type  radio  name  chName   gt  lt br   gt  x000D       lt input type  radio  name  chName   gt  lt br   gt  x000D       lt input type  radio  name  chName   gt  lt br   gt  x000D       lt input type  radio  name  chName   gt  lt br   gt  x000D       lt input type  button  onclick  toggleByName     value  toggle   gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    note  the only time you would have a reason to use the  name  attribute should be for checkbox or radio inputs   Or you could just add another class to the elements for selection  This is what I would do    x000D   x000D  function toggleByClass bolShow    x000D    if  bolShow    x000D          rowToToggle   show    x000D      else   x000D          rowToToggle   hide    x000D      x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt html gt  x000D     lt head gt  x000D       lt title gt sandBox lt  title gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt table gt  x000D         lt tr gt  x000D           lt td gt data1 lt  td gt  x000D           lt td class  bold rowToToggle  gt data2 lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt data1 lt  td gt  x000D           lt td class  bold rowToToggle  gt data2 lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td gt data1 lt  td gt  x000D           lt td class  bold rowToToggle  gt data2 lt  td gt  x000D         lt  tr gt  x000D       lt  table gt  x000D       lt input type  button  onclick  toggleByClass true    value  show   gt  x000D       lt input type  button  onclick  toggleByClass false    value  hide   gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

If you have something like    lt input type  checkbox  name  mycheckbox  value  11  checked    gt   lt input type  checkbox  name  mycheckbox  value  12  gt    You can read all like this   jQuery  input name  mycheckbox     each function         console log  this value         this checked          The snippet    x000D   x000D  jQuery  input name  mycheckbox     each function     x000D    console log  this value         this checked    x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  checkbox  name  mycheckbox  value  11  checked    gt  x000D   lt input type  checkbox  name  mycheckbox  value  12  gt  x000D   x000D   x000D

User · Answer

You can get the element in JQuery by using its ID attribute like this       tcol1   hide

User · Answer

You can use the jQuery attribute selector      td name   tcol1          matches exactly  tcol1     td name   tcol           matches those that begin with  tcol     td name   tcol           matches those that end with  tcol     td name   tcol           matches those that contain  tcol

[javascript] How can I select an element by name with jQuery?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to dom

Examples related to jquery-selectors

Examples related to jquery-selectbox