Find all checked checkbox attribute value as xml

Question

How do I find all checked checkbox's attribute value as an xml string?

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

I want to find all checked checkboxes "myattribute" value as an xml string like below,

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

What's the best way to do it? I'm using ASP.net and HTML. Javascript


Show source
| javascript   | jquery   | html   | asp.net   2017-01-04 19:01 4 Answers

Answers ( 4 )

  1. 2017-01-04 19:01

    Using jQuery you can do something like this.

    // 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. 2017-01-04 19:01

    I don't know if I understood you correctly, correct me if I'm wrong. So what I did is loop through every checkbox, got the custom myattribute values and appended them to an array using xml tags:

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

  3. 2017-01-04 19:01

    You can do it like following.

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

  4. 2017-01-04 19:01

    You can create the xml structure by looping through the checkboxes - it is also recommended to use data- for custom attributes and access it using .data() method.

    See demo below:

    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>

◀ Go back