回声单选按钮值，不使用php中的提交按钮

Question

我想在不使用提交按钮的情况下回显所选的单选按钮值。我想在选中时显示单选按钮的值。这是代码。

   <?php 
if(!empty($_GET['a1'])){
      $selected = $_GET['a1'];
}
else{
      //if no option was selected, set home as default
      $selected = 'home';
}
?>
<form action="" method="post">
         <input type="radio" name="a1" value="home"  /> Home <?php echo ($selected == 'home' ? 'This was selected!' : '');?> </br>
         <input type="radio" name="a1" value="site1" /> Site 1 <?php echo ($selected == 'site1' ? 'This was selected!' : '');?> </br>
         <input type="radio" name="a1" value="site2" /> Site 2 <?php echo ($selected == 'site2' ? 'This was selected!' : '');?> </br>
</form>

我希望输出格式如下

Answer 1

You need to use the onchange event of the radio buttons with javascript/jquery.

PHP runs server-side, not client-side, so without sending client-side changes to the server, it can't output stuff based on them: you'd need to send a $_POST or a $_GET request, either by submitting the form or using AJAX. Not necessary for this.

<div id="radioMsg"></div>
<form action="" method="post">
         <input type="radio" name="a1" value="home" onchange="showRadio()"  /> Home <?php echo ($selected == 'home' ? 'This was selected!' : '');?> </br>
         <input type="radio" name="a1" value="site1" onchange="showRadio()" /> Site 1 <?php echo ($selected == 'xyz' ? 'This was selected!' : '');?> </br>
         <input type="radio" name="a1" value="site2" onchange="showRadio()" /> Site 2 <?php echo ($selected == 'zbc' ? 'This was selected!' : '');?> </br>
</form>

Meanwhile in showRadio():

function showRadio(){
    var radioVal = $("input[name='a1']:checked").val();
    if(radioVal) {
        $( "#radioMsg" ).html("<p>"+radioVal+"</p>");
    }
}

I'm not sure where you want the changed button's value outputted, so I'm putting it into that div just as an example.

To define the onchange event in an external stylesheet instead of inline:

$( "input[name='a1']" ).change(function(){
    ... (showRadio's contents go here)
});

Answer 2

我不确定您希望如何使用PHP（!!!）进行客户端操作，但这是在选中时显示单选按钮值的jquery解决方案：

＆＃13;

＆＃13;

$('#myform input[type=radio]').on('change', function(event) {
  var result = $(this).val();
  $('#result').html(result);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="" method="post">
  <input type="radio" name="a1" value="home" /> home</br>
  <input type="radio" name="a1" value="site1" /> site1</br>
  <input type="radio" name="a1" value="site2" /> site2</br>
  <div id="result"></div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是你的解决方案......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>//jQuery Plugin
<?php 
if(!empty($_GET['a1'])){ $selected = $_GET['a1'];}
else{ $selected = 'home';}
?>
<form action="" method="post">
    <label>
        <input type="radio" name="a1" value="home" /> Home 
    </label></br>
    <label>
        <input type="radio" name="a1" value="site1" /> Site 1 
    </label></br>
    <label>
        <input type="radio" name="a1" value="site2" /> Site 2 
    </label></br>
</form>
<span class="r-text"><?php echo $selected;?></span>
<script>
    $('input[type=radio]').click(function(e) {//jQuery works on clicking radio box
        var value = $(this).val(); //Get the clicked checkbox value
        $('.r-text').html(value);
    });
</script>