将所有选中的复选框属性值查找为 xml答案

【问题标题】：Find all checked checkbox attribute value as xml将所有选中的复选框属性值查找为 xml
【发布时间】：2017-01-05 02:30:25
【问题描述】：

如何将所有选中复选框的属性值作为 xml 字符串查找？

  <input type="checkbox" id="chkDocId1" myattribute="myval1"/>
  <input type="checkbox" id="chkDocId2" myattribute="myval43"/>
  <input type="checkbox" id="chkDocId3" myattribute="myval21"/>
  ..
  ..

我想将所有选中的复选框“myattribute”值查找为 xml 字符串，如下所示，

<selected>
  <idx>myval1</idx>
  <idx>myval143</idx>
 ..
 ..
</selected>

最好的方法是什么？我正在使用 ASP.net 和 HTML。 Javascript

【问题讨论】：

标签： javascript jquery html asp.net

【解决方案1】：

使用 jQuery 你可以做这样的事情。

// generate the parent element using jQuery and
// cache it for reference
var $sel = $('<selected/>');

// get all checkbox which has attribute `myattribute`
$(':checkbox[myattribute]').each(function() {
  // generate `idx` element with the content
  $('<idx/>', {
    html: $(this).attr('myattribute')
      // append element to parent
  }).appendTo($sel);
});

// get markup of the element fro object
console.log($sel[0].outerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chkDocId1" myattribute="myval1" />
<input type="checkbox" id="chkDocId2" myattribute="myval43" />
<input type="checkbox" id="chkDocId3" myattribute="myval21" />

【讨论】：

【解决方案2】：

您可以通过复选框循环创建 xml 结构 - 还建议使用 data- 自定义属性并使用 .data() 方法访问它。

请看下面的演示：

var xml = $('<selected></selected>');
$('input[type=checkbox]').each(function(){
  xml.append('<idx>' + $(this).data('myattribute') + '</idx>');
});

$('#result').append(xml);
console.log(xml[0].outerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chkDocId1" data-myattribute="myval1"/>
  <input type="checkbox" id="chkDocId2" data-myattribute="myval43"/>
  <input type="checkbox" id="chkDocId3" data-myattribute="myval21"/>

<br/>
<div id="result"></div>

【讨论】：

【解决方案3】：

我不知道我是否理解正确，如果我错了，请纠正我。所以我所做的是遍历每个复选框，获取自定义 myattribute 值并使用 xml 标签将它们附加到数组中：

var xmlArr = [];
xmlArr += "<selected>";
//to loop only through checked checkboxes just replace $('input[type="checkbox"]') with $('input[type="checkbox"]:checked')
$('input[type="checkbox"]').each(function(){
  var myAttribute = $(this).attr('myattribute');
  xmlArr += "<idx>" + myAttribute + "</idx>"; 
});
xmlArr += "<selected>";
console.log(xmlArr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chkDocId1" myattribute="myval1" />
<input type="checkbox" id="chkDocId2" myattribute="myval43" />
<input type="checkbox" id="chkDocId3" myattribute="myval21" />

【讨论】：

【解决方案4】：

你可以像下面那样做。

var xml = $(':checkbox:checked').map(function() {
    return '<idx>' + $(this).attr('myattribute') + '</idx>';
}).get().join('');

xml = '<selected>' + xml + '</selected>';

console.log(xml)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked id="chkDocId1" myattribute="myval1"/>
<input type="checkbox" id="chkDocId2" myattribute="myval43"/>
<input type="checkbox" checked id="chkDocId3" myattribute="myval21"/>

【讨论】：