单击时不更改属性的HTML复选框答案

【问题标题】：Html Checkbox when clicked not changing the attribute单击时不更改属性的HTML复选框
【发布时间】：2023-03-22 00:48:01
【问题描述】：

我有一个小的 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);
  }

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

【问题讨论】：

您使用了错误的语法进行输入，不提供结束标签，只提供content <input type="checkbox" /> content
我也试过了。它不工作
真正超级简单的调试方法！，它确实逐行编写console.log消息，这样你就可以确定你错在哪里

标签： jquery html checkbox

【解决方案1】：

这是由于chkval 的值错误。

应该是：

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

你使用的是.html()

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

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>

【讨论】：

@srinivasan 如果答案正确，您可以将其标记为正确