单击Html复选框而不更改属性

时间:2017-03-17 12:04:33

标签: jquery html checkbox

我有一个小的html表,其中一列包含一个复选框,另一列包含一些标题。根据表数据,我需要生成一个XML文件。一切都工作正常,但当我通过点击它生成的xml文件中没有反映时,将复选框值更改为true或false。 checked属性似乎默认是固定的。这是我的代码。请帮我,我错了。提前谢谢..



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);
  }
&#13;
<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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

这是由chkval的错误val引起的。

应该是:

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

您使用的是.html()

  

html()方法设置或返回所选元素的内容(innerHTML)。

JSFIDDLE

&#13;
&#13;
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);

}
&#13;
<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>
&#13;
&#13;
&#13;