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

问题描述 投票:1回答:3

要回显来自已选中复选框的值,我正在使用此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>
javascript php jquery ajax input
3个回答
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 />';
} 

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中做你想做的事。

0
投票

一个简单的foreach循环可能呢?

if(isset($_POST["checkboxes_value"])) {  
   foreach($_POST['checkboxes_value'] as $result){
       echo '<input type="checkbox" class="cb" value="' . $result . '" /> ' . $result . ' <br />';
   }
} 
© www.soinside.com 2019 - 2024. All rights reserved.