javascript - 当选择像这样的功能的单选按钮时，如何销毁id中的数据？

Question

当选择像这样的功能的单选按钮时，如何销毁id中的数据？

...................................................... ...................................................... ...................................................... ......................

首先加载页面index.php，

1. 按Check1按钮，您将看到文本 PRODUCTS DATA OK
2. 选中单选按钮 SECOND RADIO
3. 选中单选按钮 FIRST RADIO
4. 您将看到文字PRODUCTS DATA OK

这是我在步骤 2. checked radio button SECOND RADIO 中提出的问题 选中单选按钮 SECOND RADIO 后，我想销毁文本PRODUCTS DATA OK 那家商店在<p id="myplace_data1"></p>

我怎样才能做到这一点？

index.php

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script>
    $(document).ready(function(){
        $(".radio_id").click(function(){
            if($(this).attr("value")=="first"){
                $("#second_checkbox").hide();                
                $("#first_checkbox_display").show();
            }
            if($(this).attr("value")=="second"){
                $("#first_checkbox_display").hide();                
                $("#second_checkbox").show();    
            }
        });
    });
</script>


<form id="first_checkbox_display" name="form1" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);" style=" margin: 0px; " >
<input type="text" name="products_id" value="1294759">
<input type="text" name="products_color" value="red">
<input type="text" name="products_type" value="electronic">
<input type="button" value="Check1" onclick="doajax_products_check()"/>
<p id="myplace_data1"></p>
</form>



<form id="second_checkbox" name="form2" method="post" action="" ENCTYPE = "multipart/form-data" onsubmit="return checkform(this);" style=" display: none; margin: 0px; " >
<input type="text" name="products_id" value="0000000">
<input type="text" name="products_color" value="iiiiiii">
<input type="text" name="products_type" value="aaaaaaa">
<input type="button" value="Check2" onclick="doajax_products_check2()"/>
<p id="myplace_data2"></p>
</form>
<br>
<br>
<label><input type="radio" class="radio_id" name="colorRadio" value="first" checked >FIRST RADIO</label>
<br>
<label><input type="radio" class="radio_id" name="colorRadio" value="second">SECOND RADIO</label>




<script language="javascript">
function createAjax() 
{
    var request = false;
        try {
                request = new ActiveXObject('Msxml2.XMLHTTP');
            }
        catch (err2) 
            {
                try 
                    {
                        request = new ActiveXObject('Microsoft.XMLHTTP');
                    }
                catch (err3) 
                    {
                try 
                           {
                    request = new XMLHttpRequest();
                   }
                catch (err1) 
                   {
                    request = false;
                   }
                    }
            }
    return request;
}
</script>



<script language="javascript">
function doajax_products_check(mydata){
 var ajax1=createAjax(); 
 ajax1.onreadystatechange=function(){
  if(ajax1.readyState==4 && ajax1.status==200){
   document.getElementById('myplace_data1').innerHTML=ajax1.responseText;
  }else{
   return false;
  }
 }
 ajax1.open("POST","data.php",true);
 ajax1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
 ajax1.send("products_color="+document.form1.products_color.value+"&products_type="+document.form1.products_type.value+"&products_id="+document.form1.products_id.value);
}
</script>









<script language="javascript">
function doajax_products_check2(mydata){
 var ajax1=createAjax(); 
 ajax1.onreadystatechange=function(){
  if(ajax1.readyState==4 && ajax1.status==200){
   document.getElementById('myplace_data2').innerHTML=ajax1.responseText;
  }else{
   return false;
  }
 }
 ajax1.open("POST","data.php",true);
 ajax1.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
 ajax1.send("products_color="+document.form2.products_color.value+"&products_type="+document.form2.products_type.value+"&products_id="+document.form2.products_id.value);
}
</script>

数据.php

<?PHP
if(isset($_POST['products_color']))
    {
        if ( $_POST['products_id'] != '' )
            { 
                if ( $_POST['products_type'] != '' )
                    {  
?>
                        <span class="taken_domain" style=" display: block; margin: 0 auto; " >PRODUCTS DATA OK</span> 
<?PHP
                    }
                 else
                    {
?>
                        <span class="taken_domain" style=" display: block; margin: 0 auto; " >NO PRODUCTS type</span> 
<?PHP
                    }
            }
        else
            { 
?>             
                <span class="taken_domain" style=" display: block; margin: 0 auto; " >NO PRODUCTS ID</span>             
<?PHP                
            }
    }
else
    {
?>
        <span class="taken_domain" style=" display: block; margin: 0 auto; " >NO PRODUCTS COLOR</span>    
<?PHP    
    }    
?>

Answer 1

测试选中状态并将 HTML 设置为空白 -

if( $('input[value="second"]').is(':checked') ){
    $('#myplace_data1').html('');
    var products_id = ?; // you'll have to get the product id here
    // make AJAX call here...
    $.post( "delete_product.php", { products_id: products_id, user: user_id } );
}

您所要做的就是创建一个连接到数据库并运行查询的 PHP 文件。

http://api.jquery.com/jquery.post/