Question

这是我在 JQUERY中的代码：

$(document).ready(function() {
$(".checkbox1").on("change",function(){

if (this.checked ) {
        $("#text2").val($("#text1").val());

    } else {

        $('#text2').attr("value", "");
        $("#text2").attr("placeholder", "text1")  ;
      }    

   });

});

这是我在 PHP：

中的代码

 $id = mysqli_real_escape_string($sqlquery1, $_GET['id']);
 $result = $myquery->query("SELECT * FROM `rr1` LEFT JOIN `CAL` ON 
               `rr1`.`si`=`rr2`.`sii` WHERE `rr1`.`cust`= '$id' 
                ORDER BY `si` ASC ");
 while ($myowndata = $result->fetch_assoc()) {

    <td style='border:0;'><input type='text' name='si2' id='text1' value='".$myowndata['Custom']."' autocomplete='off' size='10' readonly  ></td>
    <td style='border:1px solid black'><input type='text' id='text2' name='pdcc' autocomplete='off' size='10' ></td>
    <td style='border:0px solid black;'><input type='checkbox' name='checkboxee' id='checkboxee' class='checkbox1'></td> 
     }

我的问题是：

如果选中复选框并使用while循环，如何在text2中复制text1的值？对不起，我的英语不好。虽然它已经工作但它只适用于第一线。当我点击其他复选框时，它不再复制了。 see this image

Answer 1

检查以下示例：

$(document).ready(function() {
$("#checkbox1").on("change",function(){

if (this.checked ) {
        $("#text2").val($("#text1").val());

    } else {

        $('#text2').val("");
        $("#text2").attr("placeholder", "text1")  ;
      }    

   });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Text1: <input type="text" id="text1" value=""><br>
Text2: <input type="text" id="text2" value=""><br>
Check: <input type="checkbox" id="checkbox1" >

Answer 2

您必须为每一行添加唯一ID，否则js将始终只获得第一行：

      $id = mysqli_real_escape_string($sqlquery1, $_GET['id']);
         $result = $myquery->query("SELECT * FROM `rr1` LEFT JOIN `CAL` ON 
                       `rr1`.`si`=`rr2`.`sii` WHERE `rr1`.`cust`= '$id' 
                        ORDER BY `si` ASC ");
        $rowID=0;
         while ($myowndata = $result->fetch_assoc()) {

            <td style='border:0;'><input type='text' name='si2' id='text1-'.$rowID value='".$myowndata['Custom']."' autocomplete='off' size='10' readonly  ></td>
            <td style='border:1px solid black'><input type='text' id='text2-'.$rowID name='pdcc' autocomplete='off' size='10' ></td>
            <td style='border:0px solid black;'><input type='checkbox' name='checkboxee' id='checkboxee' class='checkbox1' rID=$rowID ></td> 
$rowID++;
             }

js看起来应该是这样的：

$(document).ready(function() {
$(".checkbox1").on("change",function(){
var rowID = $(this).attr("rID");
if (this.checked ) {
        $("#text2-"+rowID).val($("#text1-"+rowID).val());

    } else {

        $('#text2-'+rowID).attr("value", "");
        $("#text2-"+rowID).attr("placeholder", "text1")  ;
      }    

   });

})

Answer 3

不要使用重复ID。使用class并找到该类以使用parent获取值。运行代码段以查看结果。

$(document).ready(function() {
  $(".checkbox1").on("change", function() {
    var $this = $(this).parent().parent();
    if (this.checked) {

      $this.find('.text2').val($this.find('.text1').val())

    } else {
      $this.find('.text2').val('');
      $this.find('.text2').attr("placeholder", "text1");

    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td style='border:0;'>
      <input type='text' name='si2' class='text1' value='".$myowndata[' Custom ']."' autocomplete='off' size='10' readonly>
    </td>
    <td style='border:1px solid black'>
      <input type='text' class='text2' name='pdcc' autocomplete='off' size='10'>
    </td>
    <td style='border:0px solid black;'>
      <input type='checkbox' name='checkboxee' id='checkboxee' class='checkbox1'>
    </td>

  </tr>
  <tr>
    <td style='border:0;'>
      <input type='text' name='si2' class='text1' value='".$myowndata[' Custom ']."' autocomplete='off' size='10' readonly>
    </td>
    <td style='border:1px solid black'>
      <input type='text' class='text2' name='pdcc' autocomplete='off' size='10'>
    </td>
    <td style='border:0px solid black;'>
      <input type='checkbox' name='checkboxee' id='checkboxee2' class='checkbox1'>
    </td>

  </tr>
</table>

使用while循环选中复选框时，如何将文本框值复制到另一个文本框？

3 个答案: