すべてのチェックボックスの属性値をxmlとして探します

Question

チェックボックスのチェックボックスの属性値をすべてXML文字列で検索するにはどうすればよいですか？

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

私は、すべてのチェックボックスをチェックし、以下のようなXML文字列として「myattribute」値を見つけるしたい、

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

それを行うための最善の方法は何ですか

？私はASP.netとHTMLを使用しています。 Javascript

Answer 1

あなたは次のようにそれを行うことができます。

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"/>

Answer 2

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" />

Answer 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" />

Answer 4

あなたは、チェックボックスを通じてをループすることで、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>

を