如何从复选框中获取值并使用 jquery ajax 输入

Question

为了回显选中复选框的值，我使用了这个 Ajax 代码：

HTML：

 <input type="checkbox" class="cb" value="PHP" /> PHP <br />  
 <input type="checkbox" class="cb" value="ASP" /> ASP <br />  
 <input type="checkbox" class="cb" value="JSP" /> JSP <br /> 

 <button type="button" class="values">Submit</button>

jQuery：

$('.values').click(function(){  
       var checkboxes_value = []; 

       $('.cb').each(function(){  
            //if($(this).is(":checked")) { 
            if(this.checked) {              
                 checkboxes_value.push($(this).val());                                                                               
            }  
       });                              
       checkboxes_value = checkboxes_value.toString(); 

       $.ajax({  
            url:"",  
            method:"POST",  
            data:{ checkboxes_value:checkboxes_value },  
            success:function(data){  
                 $('.echo').html(data);  
            }  
       });  
    });

PHP：

if(isset($_POST["checkboxes_value"])) {  
  $result = $_POST["checkboxes_value"];  
  echo  '<br />'.$result.'<br />';
} 

如何在同一个 Ajax 调用中按照相同的过程回显输入字段的值？

所以我的 HTML 将是：

<input type="checkbox" class="cb" value="PHP" /> PHP <br />  
<input type="checkbox" class="cb" value="ASP" /> ASP <br />  
<input type="checkbox" class="cb" value="JSP" /> JSP <br />  
<input type="text" class="text" value="" />

<button type="button" class="values">Submit</button>

Answer 1

我不确定您为什么使用 AJAX，因为您只返回通过 AJAX 发送的值。这样做怎么样：

$('.values').click(function(){
    var checkboxes_value = []; 

    $('input').each(function(){
        if(this.checked) {
            checkboxes_value.push($(this).val());
        }else if($(this).hasClass('text')){
            checkboxes_value.push($(this).val());
        }
    });                              

    checkboxes_value = checkboxes_value.toString(); 
    $('.echo').html(checkboxes_value);
});

div.echo{margin-top:50px;background:wheat;padding:50px;border:1px solid red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<input type="checkbox" class="cb" value="PHP" /> PHP <br />  
<input type="checkbox" class="cb" value="ASP" /> ASP <br />  
<input type="checkbox" class="cb" value="JSP" /> JSP <br />  
<input type="text" class="text" value="" />

<button type="button" class="values">Submit</button>

<div class="echo"></div>

注意事项：

1. 由于您要测试的元素都是input 元素，因此您可以循环遍历所有输入元素。

2. 不需要 AJAX，因为它只会回显收到的内容。你可以在 javascript/jQuery 中做你想做的事。

Answer 2

所以你可以这样做

<input type="text" class="text" value="" />

你的 jquery

$('.values').click(function(){  
       var checkboxes_value = []; 
        var inputval=$(".text").val();//getting value of input field
       $('.cb').each(function(){  
            //if($(this).is(":checked")) { 
            if(this.checked) {              
                 checkboxes_value.push($(this).val());                                                                               
            }  
       });                              
       checkboxes_value = checkboxes_value.toString(); 

       $.ajax({  
            url:"",  
            method:"POST",  
            data:{ checkboxes_value:checkboxes_value,inputval:inputval},  
            success:function(data){  
                 $('.echo').html(data);  
            }  
       });  
    });

你的 php 代码

if(isset($_POST["checkboxes_value"]) && isset($_POST["inputval"]) ) {  
  $result = $_POST["checkboxes_value"];  
  echo  '<br />'.$result.'<br />';
echo  '<br />'.$_POST["inputval"].'<br />';
} 

Answer 3

也许是一个简单的 foreach 循环？

if(isset($_POST["checkboxes_value"])) {  
   foreach($_POST['checkboxes_value'] as $result){
       echo '<input type="checkbox" class="cb" value="' . $result . '" /> ' . $result . ' <br />';
   }
}