使用javascript（数组）获取复选框属性

Posted 2023-05-09

【中文标题】使用javascript（数组）获取复选框属性

【英文标题】：get checkbox attribute using javascript (array)

【发布时间】：2018-01-30 04:07:44

【问题描述】：

大家好，我想获取我的复选框的属性。复选框是一个数组，所以我想获取选中复选框的属性并将其放在文本框上并用逗号分隔。

这是我的 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";
  

这是我的 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();
 

我想获取名为checkval[] 的复选框的属性。我想获取attr 数组中的内容。我希望你们能帮助我。

【问题讨论】：

你想从复选框中获得什么属性？

对不起先生，我已经更新了我的代码，然后我想在我的复选框中获得attr="'.$q["OCPC_ID"].'"先生

你的意思是输入文本的值？

发布您使用 php 创建的标记

不，先生，我的复选框的attr。我想获得名为checkval[]的复选框的attr

【参考方案1】：

试试这个

  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)
      i==0 ? checkval += checkboxes[i].value : checkval += ","+checkboxes[i].value;
      i==0 ? checkid += input[i].value : checkid += ","+input[i].value;
    
  
  console.log(checkval+" "+checkid);
);

见demo

【参考方案2】：

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);

我已将val_id += ","+cd[l].attr; 更改为val_id += ","+cd[l].getAttribute("attr");

感谢你们的时间。