CODEWITHSUNDEEP
jqueryhtmlcheckbox
Srinivasan
Srinivasan

Reputation: 303

Html Checkbox when clicked not changing the attribute

I have a small html table where one column consists of a checkbox and another one some caption. Based on the table data i need to generate a XML file. Everything is working fine, but when i change the checkbox value to true or false by clicking its not reflecting in the xml file i generate. the checked attribute seems to be fixed by default. here is my code. please help me where I am wrong. thanks in advance..

function createxml() {

    var table = $("#fruitsTable tbody");

    var detxml = '';

    detxml += '<ROOT>';
    detxml += '<Data>';

    var cRow = 1;

    table.find('tr').each(function (i) {   
        detxml += '<Report_Details ';                        
        detxml += 'FruitName="'       + $(this).find('td').eq(1).text() + '" ';

        var chkval = $(this).find('td').eq(0).html();

        if ($(chkval).prop('checked') == true)
            {
                detxml += 'Visible="1"';
            }
        else
            {
                detxml += 'Visible="0"';
            }
        detxml += 'DOrder="'        + cRow + '" ';                        
        detxml += '>';
        detxml += '</Report_Details>';   

        cRow++;                     
    });

    detxml += '</Data>';
    detxml += '</ROOT>';
    alert (detxml);
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="fruitsTable">
   <tbody>
     <tr> 
       <td> <input type="checkbox" checked> </input>   </td>     
       <td> Apple </td>      
    </tr>
    <tr> 
      <td> <input type="checkbox" checked> </input>   </td>     
      <td> Orange </td>      
    </tr>
    <tr> 
      <td> <input type="checkbox"> </input>   </td>     
      <td> Pineapple </td>      
    </tr>
    <tr> 
      <td> <input type="checkbox"> </input>   </td>     
      <td> Grapes </td>      
    </tr>
  </tbody>
</table>

</br>
<button onclick="createxml()"> Show String </button>

Upvotes: 0

Views: 111

Answers (1)

shubham agrawal
shubham agrawal

Reputation: 3541

This is due to wrong val of chkval.

It should be:

 var chkval = $(this).find('input[type="checkbox"]');

You were using .html()

The html() method sets or returns the content (innerHTML) of the selected elements.

JSFIDDLE

function createxml() {

  var table = $("#fruitsTable tbody");

  var detxml = '';

  detxml += '<ROOT>';
  detxml += '<Data>';

  var cRow = 1;

  table.find('tr').each(function(i) {
    detxml += '<Report_Details ';
    detxml += 'FruitName="' + $(this).find('td').eq(1).text() + '" ';

    var chkval = $(this).find('input[type="checkbox"]');
    if ($(chkval).is(":checked")) {
      detxml += 'Visible="1"';
    } else {
      detxml += 'Visible="0"';
    }
    detxml += 'DOrder="' + cRow + '" ';
    detxml += '>';
    detxml += '</Report_Details>';

    cRow++;
  });

  detxml += '</Data>';
  detxml += '</ROOT>';

  alert(detxml);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <table id="fruitsTable">
    <tbody>
      <tr>
        <td>
          <input type="checkbox"> </input>
        </td>
        <td> Apple </td>
      </tr>

      <tr>
        <td>
          <input type="checkbox"> </input>
        </td>
        <td> Orange </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox"> </input>
        </td>
        <td> Pineapple </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox"> </input>
        </td>
        <td> Grapes </td>
      </tr>
    </tbody>
  </table>
  </br>
  <button onclick="createxml()"> Show String </button>

</body>

Upvotes: 2

Related Questions