JQUERY根据表列值“状态”(1或0)将复选属性添加到复选框

时间:2017-07-12 16:50:09

标签: javascript jquery html checkbox

我一直在谷歌搜索非常努力,但把关键字复选框和表放在一起给了我“获取已检查行的行值”的结果。

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

所以我有这个: 所以它做的是它需要单元格的值并将其放入文本框,没有问题,但我想取status的值为1(对于活动)并将其放入复选框,如果value为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>

3 个答案:

答案 0 :(得分:0)

做得很好, 只需添加以下行:

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

在你的剧本中。

答案 1 :(得分:0)

您可以使用解决方案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>

由于状态变量包含数据,但它的typeof是字符串所以我使用 parseInt 将其更改为整数作为复选框选中/取消选中

答案 2 :(得分:0)

要实现此目的,您可以使用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>