【问题标题】:JQUERY Add checked attribute to checkbox depending on Table column value `Status` (1 or 0)JQUERY根据表列值“状态”(1或0)将选中的属性添加到复选框
【发布时间】:2017-07-13 01:06:24
【问题描述】:

我一直在用谷歌搜索,但是将关键字复选框和表格放在一起会给我“获取选中行的行值”的结果。

而且我遇到了同样关注的罕见问题,但都是高级的(ajax,angularjs)我只是一个学生级程序员(最多基本 jquery)。

所以我有这个: 所以它的作用是获取单元格的值并将其放入文本框中,没有问题,但我想取 status 的值,即 1(用于活动)并将其放入复选框中,如果值为1勾选复选框,0不勾选。

在此先感谢大家,请原谅学生的编码,尽管我的理解有限,但我会感谢任何更正,但我一直在努力扩大我的知识。

$(document).ready(function(){
	$(".buttonedit").click(function(){
		var Lastname = $(this).closest("tr").find("td:eq(0)").text();
		var Firstname = $(this).closest("tr").find("td:eq(1)").text();
		var Status = $(this).closest("tr").find("td:eq(2)").text();
    $("#lname").val(Lastname);
    $("#fname").val(Firstname);
    
	});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="solid">
  
  <thead>
    <tr>
      <td>lastnmae</td>
      <td>firstname</td>
      <td>status</td>
      <td>action</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>gates</td>
      <td>bill</td>
      <td>1</td>
      <td><button class="buttonedit">Edit</button></td>
    </tr>
    
  </tbody>
</table>

<form action="">
  <input type="text" placeholder="enter lastname"id="lname"><br>
  <input type="text" placeholder="enter firstname"id="fname"><br>
  <input type="checkbox" name="status" id="status">Active?<br>
</form>

【问题讨论】:

    标签: javascript jquery html checkbox


    【解决方案1】:

    为此,您可以使用prop() 设置复选框的选中状态。要使其工作,您需要将值设置为布尔值。为此,您可以使用Status == '1' 的结果,如下所示:

    $(document).ready(function() {
      $(".buttonedit").click(function() {
        var Lastname = $(this).closest("tr").find("td:eq(0)").text();
        var Firstname = $(this).closest("tr").find("td:eq(1)").text();
        var Status = $(this).closest("tr").find("td:eq(2)").text();
        
        $("#lname").val(Lastname);
        $("#fname").val(Firstname);
        $('#status').prop('checked', Status == '1'); // note this line
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table border="solid">
      <thead>
        <tr>
          <td>lastnmae</td>
          <td>firstname</td>
          <td>status</td>
          <td>action</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>gates</td>
          <td>bill</td>
          <td>1</td>
          <td><button class="buttonedit">Edit</button></td>
        </tr>
        <tr>
          <td>ballmer</td>
          <td>steve</td>
          <td>0</td>
          <td><button class="buttonedit">Edit</button></td>
        </tr>
      </tbody>
    </table>
    
    <form action="">
      <input type="text" placeholder="enter lastname" id="lname"><br>
      <input type="text" placeholder="enter firstname" id="fname"><br>
      <input type="checkbox" name="status" id="status">Active?<br>
    </form>

    【讨论】:

      【解决方案2】:

      这里有解决方案https://jsfiddle.net/n5s721bv/

      $(document).ready(function(){
          $(".buttonedit").click(function(){
      		var Lastname = $(this).closest("tr").find("td:eq(0)").text();
      		var Firstname = $(this).closest("tr").find("td:eq(1)").text();
      		var Status = $(this).closest("tr").find("td:eq(2)").text();
              $("#lname").val(Lastname);
              $("#fname").val(Firstname);
              $('#status').prop('checked', parseInt(Status));
      	});
      });
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <table border="solid">
        
        <thead>
          <tr>
            <td>lastnmae</td>
            <td>firstname</td>
            <td>status</td>
            <td>action</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>gates</td>
            <td>bill</td>
            <td>1</td>
            <td><button class="buttonedit">Edit</button></td>
          </tr>
          <tr>
            <td>Test</td>
            <td>Test11</td>
            <td>0</td>
            <td><button class="buttonedit">Edit</button></td>
          </tr>
          <tr>
            <td>Test9</td>
            <td>bill</td>
            <td>1</td>
            <td><button class="buttonedit">Edit</button></td>
          </tr>
          
        </tbody>
      </table>
      
      <form action="">
        <input type="text" placeholder="enter lastname"id="lname"><br>
        <input type="text" placeholder="enter firstname"id="fname"><br>
        <input type="checkbox" name="status" id="status">Active?<br>
      </form>

      由于 Status 变量包含数据,但它的 typeof 是 string 所以我使用 parseInt 将其更改为整数作为复选框选中/未选中.

      【讨论】:

      • 请注意,checked 是一个布尔值,因此您的代码显式将字符串解析为int,然后隐式将其再次解析为一个布尔值。你最好不要打扰 int 步骤,直接进入布尔值。
      • 它在 JSFiddle 中工作,但是当我在我的代码中实现它时它不再工作了。
      【解决方案3】:

      做得很好, 只需添加这一行:

      $('#status').attr('checked',Status=='1'); 
      

      在你的脚本中。

      【讨论】:

      • 您还需要将checked设置为false,以防您再次点击。
      • 是的,错过了
      猜你喜欢
      • 2014-04-17
      • 2011-06-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-07-03
      • 1970-01-01
      • 1970-01-01
      • 2020-12-20
      相关资源
      最近更新 更多