Question

如果使用jquery

选中复选框，我会尝试更改每个隐藏的输入值

我需要使用for循环，因为html输入字段也是通过php循环从db生成的。所以这里生成的html代码如下：

Html：

<input id="gift0" value="1" type="checkbox">
<input id="gift-true0" value="" type="hidden">

<input id="gift1" value="1" type="checkbox">
<input id="gift-true1" value="" type="hidden">

<input id="gift2" value="1" type="checkbox">
<input id="gift-true2" value="" type="hidden">

Jquery：

   var tot = <?php echo $tot; ?>;

   jQuery(function($){
     for (var i = 0; i< tot; i++ ){
       var chk = '#gift' + i;

       var val = '#gift-true' + i;
       $(chk).change(function(e) {
         for (var a = 0; a<= jml; a++ ){
         $(val).val(($(this).is(':checked')) ? "yes" : "no");
         }
         console.log(e);
       });
     }
  });

但此代码无效。

P.S：

生成html输入的代码如下所示：

<?php
for ($i=0; $i<$total; $i++){
 echo "<input type='checkbox' id='gift$i' name='exm$i' value='1'> <br>
       <input type='hidden' id='gift-true$i' value=''></td> <br><br>";
}

Answer 1

更改代码中的这两个值

var chk = $('#gift' + i).val();
var val = $('#gift-true' + i).val();

Answer 2

这就是你想要的猜测

var tot = 3;

 jQuery(function($){
 for (var i = 0; i< tot; i++ ){
   $('#gift' + i).on('change', function(e) {
     $(this).next().val(($(this).is(':checked')) ? "yes" : "no");
   });
 }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="gift0" value="1" type="checkbox">
<input id="gift-true0" value="no" type="text">
<input id="gift1" value="1" type="checkbox">
<input id="gift-true1" value="no" type="text">
<input id="gift2" value="1" type="checkbox">
<input id="gift-true2" value="no" type="text">

Answer 3

您可以使用next()功能执行此操作，因为所有输入都在复选框旁边。请将var tot = 3;替换为var tot = <?php echo $tot; ?>;，将type="text"替换为type="hidden"

var tot = 3;

   jQuery(function($){
     for (var i = 0; i< tot; i++ ){
       $('#gift' + i).on('change', function(e) {
         $(this).next().val(($(this).is(':checked')) ? "yes" : "no");
       });
     }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="gift0" value="1" type="checkbox">
<input id="gift-true0" value="no" type="text">

<input id="gift1" value="1" type="checkbox">
<input id="gift-true1" value="no" type="text">

<input id="gift2" value="1" type="checkbox">
<input id="gift-true2" value="no" type="text">

Answer 4

试试这个

 var tot = <?php echo $tot; ?>;

   jQuery(function($){
     for (var i = 0; i< tot; i++ ){
       var chk = $('#gift' + i);

       var val = $('#gift-true' + i);
       $(chk).change(function(e) {
         for (var a = 0; a<= jml; a++ ){
         $(val).val(($(this).is(':checked')) ? "yes" : "no");
         }
         console.log(e);
       });
     }
  });

您需要获得object而不是string，现在您获得的string是'#gift' + i。将其包裹在$('#gift' + i)内以获取对象。

Answer 5

只有在更改复选框时才应设置相关输入。对于change事件的每个输入，您不应再循环。

var tot = <?php echo $tot; ?>;

   jQuery(function($){
     for (var i = 0; i< tot; i++ ){
       $('#gift' + i).on('change', function(e) {
           // no need for another loop as you should target only relevant input field
           $('input#gift-true' + i).val(($(this).is(':checked')) ? "yes" : "no");
       });
     }
   });

Answer 6

哟这里不需要循环。只需更改下一个输入的值即可。

$('input[type="checkbox"]').change(function(){

    var $hidden = $(this).next('input[type="hidden"]');
    if ($hidden.length) {
        var checked = $(this).is(':checked');
        if (checked) {
             $hidden.val('yes');
        } else {
             $hidden.val('no');
        }
    }
});

//call function for every checkbox which are already on page
$('input[type="checkbox"]').change();

此代码适用于页面上的每个复选框。要避免这种情况，只需使用更强的选择器：$('.some-class input[type="checkbox"]')

Answer 7

将您的ID更改为班级

<?php
for ($i=0; $i<$total; $i++){
 echo "<input type='checkbox' class='gift' name='exm$i' value='1'> <br>
       <input type='hidden' name='gift-exm$i' class='gift-true' value=''></td> <br><br>";
}

重构您的代码，如下所示

 $('.gift').change(function(e) {//remove any loops /keep the change event
         var el = $(this);
        el.next('.gift-true').val(el.is(':checked') ? "yes" : "no");//select the hidden input using next()
 });

ps：不要忘记为隐藏的输入添加名称

$('.gift').change(function(e) {
             var el = $(this);
            el.next('.gift-true').val(el.is(':checked') ? "yes" : "no");
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="gift" value="1" type="checkbox">
<input class="gift-true" value="no" type="text">

<input class="gift" value="1" type="checkbox">
<input class="gift-true" value="no" type="text">

<input class="gift" value="1" type="checkbox">
<input class="gift-true" value="no" type="text">

Answer 8

我的答案，与其他几个类似，也消除了for循环。

            jQuery(function ($) {
                // do this if you do not know the state of the generated checkbox
                $("input[type='checkbox']").each(function () {

                    $(this).next().val($(this).prop("checked") ? "yes" : "no");
                });

                // then this for your event handler
                $("input[type='checkbox']").on("change", function (e) {
                    $(e.target).next().val($(e.target).prop("checked")?"yes":"no");
                })
            });

Jquery在for循环中更改隐藏的输入值

8 个答案: