Get checkbox attribute using JavaScript (array)

Question

I want to get the attribute of my checkbox. The checkbox was an array so I want to get the attribute of the checked checkboxes and put it on the textbox and separate it with comma.

Here's my PHP/HTML:

$query = $db->select('owners_information',array('*'),$con);

foreach($query as $q){
     //echo $q['lastname'];        
      $output .= '
      <tr>
        <td>'.$q["firstname"].'</td>
        <td>'.$q["middlename"].'</td>
        <td>'.$q["lastname"].'</td>
        <td>'.$q["land_area"].'</td>
        <td><input type="text" value="'.$q["OCPC_ID"].'" name="ocid[]">
        <input type="checkbox" value="'.$q["land_area"].'" name="checkval[]" attr="'.$q["OCPC_ID"].'"></td>
      </tr>
      ';
    
  }
if($query > 0){
    echo '<input type="text" name="textval" id="textval">';
    echo '<br><input type="text" name="ocpc_id" id="ocpc_id">';
    echo '<input type="button" name="merge" id="merge" value="Merge" onclick="mergeFunc()">';
    echo '<input type="button" name="addNew" id="addNew" value="Add New RPU" onclick="addMerge()" style="display:none;">';
    echo $output;
  }else{
    echo "No data found";
  }

And here's my JavaScript:

function mergeFunc() {

var checkboxes = document.getElementsByName('checkval[]');
var cd = document.getElementsByName("checkval[]");

var val_id = "";
for (var l=0, n=cd.length;l<n;l++) 
{
  if (cd[l].checked) 
  {
    val_id += ","+cd[l].attr;
  }
}
if (val_id) val_id = val_id.substring(1);

alert(val_id);


var vals = "";
for (var i=0, n=checkboxes.length;i<n;i++) 
{
  if (checkboxes[i].checked) 
  {
      vals += ","+checkboxes[i].value;
  }
}
if (vals) vals = vals.substring(1);


$('#ocpc_id').val(val_id);
$('#textval').val(vals);
$('#merge').hide();
$('#addNew').show();
}

I want to get the attribute of the checkbox named checkval[]. How can I get what's inside the attr array?

sorry sir i've updated my code then i want to get the attr="'.$q["OCPC_ID"].'" sir in my checkbox — angel1108
– angel1108, Commented Aug 22, 2017 at 2:56
no sir the attr of my checkbox. i want to get the attr of my checkbox named checkval[] — angel1108
– angel1108, Commented Aug 22, 2017 at 3:07

Prasanna Venkatesh · Accepted Answer · 2025-09-30 10:29:43Z

2

Try this

document.getElementById('btn').addEventListener('click', function () {
  var checkboxes = document.getElementsByName('checkval[]');
  var input = document.getElementsByName('ocid[]');
  var checkval = '';
  var checkid = '';
  for (var i = 0; i < checkboxes.length; i++) {
    if (checkboxes[i].checked) {
      checkval += i == 0 ? checkboxes[i].value : "," + checkboxes[i].value;
      checkid += i == 0 ? input[i].value : "," + input[i].value;
    }
  }
  console.log(checkval + " " + checkid);
});

See the demo

edited Sep 30 at 10:29

answered Aug 22, 2017 at 3:38

Prasanna Venkatesh

4164 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

angel1108 · Accepted Answer · 2017-08-22 04:54:57Z

-1

var val_id = "";
for (var l=0, n=cd.length;l<n;l++) 
{
  if (cd[l].checked) 
  {
    val_id += ","+cd[l].getAttribute("attr");
  }
}
if (val_id) val_id = val_id.substring(1);

I've change val_id += ","+cd[l].attr; to val_id += ","+cd[l].getAttribute("attr");

Thanks for your time guys.

answered Aug 22, 2017 at 4:54

angel1108

3374 silver badges24 bronze badges

Collectives™ on Stack Overflow

Get checkbox attribute using JavaScript (array)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related