if else语句php / js / jquery(单选按钮和文本字段)

时间:2016-03-12 08:23:12

标签: javascript jquery if-statement radio-button textfield

我使用的代码如下:https://jsfiddle.net/t6noeL9q/1/

我想在php中使用if else语句。例如,如果我选择单选按钮1并输入严重程度,则建议应显示在建议1文本字段中。建议应根据概率和严重程度的变化而变化。我怎么能这样做?

代码:

<div class="radio">

  <tr>
    <td>
      <input class="form-control" style="background:white; border-style:none; box-shadow: inset 0px 0px 0px 0px; " type="text" name="q1" readonly='true' value="No security of hardware" />
    </td>

<p>
</p>
    <td>
      Rare &nbsp;<input style="margin-left:-2px;" type="radio" name="rad1[]" value="Rare">
    </td>
    <td>
      Unlikely &nbsp;<input style="margin-left:-2px;" type="radio" name="rad1[]" value="Unlikely">
    </td>
    <td>
      Moderate &nbsp;<input style="margin-left:-2px;" type="radio" name="rad1[]" value="Moderate">
    </td>
    <td>
      Likely &nbsp;<input style="margin-left:-2px;" type="radio" name="rad1[]" value="Likely">
    </td>
    <td>
      Very Likely &nbsp;<input style="margin-left:-2px;" type="radio" name="rad1[]" value="Very Likely">
    </td>
    <br>
    <td>
      Severity(Rate 1-10)&nbsp;<input style="width:50px;" class="form-control" type="text" name="severity1" />
    </td>
</div>
</tr>

<br>


<tr>
  <div class="radio">
    <tr>
      <td>
      <br>
        <input class="form-control" style="background:white; border-style:none; box-shadow: inset 0px 0px 0px 0px; " type="text" name="q2" readonly='true' value="No security in access control to systems" />
      </td>

      <td>
        Rare &nbsp;<input style="margin-left:-2px;" type="radio" name="rad2[]" value="Rare">
      </td>
      <td>
        Unlikely &nbsp;<input style="margin-left:-2px;" type="radio" name="rad2[]" value="Unlikely">
      </td>
      <td>
        Moderate &nbsp;<input style="margin-left:-2px;" type="radio" name="rad2[]" value="Moderate">
      </td>
      <td>
        Likely &nbsp;<input style="margin-left:-2px;" type="radio" name="rad2[]" value="Likely">
      </td>
      <td>
        Very Likely &nbsp;<input style="margin-left:-2px;" type="radio" name="rad2[]" value="Very Likely">
      </td>
      <td>
        Severity(Rate 1-10)&nbsp;<input style="width:50px;" class="form-control" type="text" name="severity2" />
      </td>

  </div>
  </tr>

  <div class="radio">
    <tr>
      <td>
      <br>
      <br>
Recommendation1: <input type="text" name="r1"/> <br><br>
Recommendation2: <input type="text" name="r2"/>

1 个答案:

答案 0 :(得分:0)

如果if语句必须在PHP中,您可以创建表单并将其传递给新的PHP脚本,或者(更可取的方式)您可以使用AJAX和JQUERY来传递无线电状态按钮到PHP脚本并检索其输出。第二种解决方案允许您显示结果而无需重新加载页面。 然而,这不是你应该怎么做。解决这个问题的正确方法是在javascript中编写一个函数,它将检查单选按钮的状态并动态显示结果而不是使用PHP。我已经编写了一个简单的代码段来向您展示如何操作(我试图通过提供更有可能解决您实际问题的解决方案来避免XY问题)。

当然如果你需要做一些服务器端计算,那么我所描述的AJAX / POST方法是不可避免的。

&#13;
&#13;
$(document).ready(function(){
  function display_result(radio_value, text_value){
    switch(radio_value){
      case "Rare":{
        /*do stuff*/
        break;
      }
      case "Unlikely":{
        /*do some other stuff*/
        break;
      }
      /* etc. */
    }
    alert(radio_value + " " + text_value); //Just to show you that it's working
  }
  $("#row1 input[type=radio]").click(function(){
    display_result($(this).val(), $("#row1 [name=severity1]").val());
  });
  $("#row1 [name=severity1]").change(function(){
    display_result($("#row1 input[type=radio]:checked").val(), $(this).val());
  });
  $("#row2 input[type=radio]").click(function(){
    display_result($(this).val(), $("#row2 [name=severity2]").val());
  });
  $("#row2 [name=severity2]").change(function(){
    display_result($("#row2 input[type=radio]:checked").val(), $(this).val());
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio" id="row1">

  <tr>
    <td>
      <h5><b>Physical Security</b></h5></td>
  </tr>
  <tr>
    <td>
      <input class="form-control" style="background:white; border-style:none; box-shadow: inset 0px 0px 0px 0px; " type="text" name="q1" readonly='true' value="No security of computer equipment" />
    </td>


    <td>
      <input style="margin-left:-2px;" type="radio" name="rad1[]" value="Rare">
    </td>
    <td>
      <input style="margin-left:-2px;" type="radio" name="rad1[]" value="Unlikely">
    </td>
    <td>
      <input style="margin-left:-2px;" type="radio" name="rad1[]" value="Moderate">
    </td>
    <td>
      <input style="margin-left:-2px;" type="radio" name="rad1[]" value="Likely">
    </td>
    <td>
      <input style="margin-left:-2px;" type="radio" name="rad1[]" value="Very Likely">
    </td>
    <td>
      <input style="width:50px;" class="form-control" type="text" name="severity1" />
    </td>
</div>
</tr>



<tr>
  <div class="radio" id="row2">
    <tr>
      <td>
        <input class="form-control" style="background:white; border-style:none; box-shadow: inset 0px 0px 0px 0px; " type="text" name="q2" readonly='true' value="No security in access control to systems" />
      </td>

      <td>
        <input style="margin-left:-2px;" type="radio" name="rad2[]" value="Rare">
      </td>
      <td>
        <input style="margin-left:-2px;" type="radio" name="rad2[]" value="Unlikely">
      </td>
      <td>
        <input style="margin-left:-2px;" type="radio" name="rad2[]" value="Moderate">
      </td>
      <td>
        <input style="margin-left:-2px;" type="radio" name="rad2[]" value="Likely">
      </td>
      <td>
        <input style="margin-left:-2px;" type="radio" name="rad2[]" value="Very Likely">
      </td>
      <td>
        <input style="width:50px;" class="form-control" type="text" name="severity2" />
      </td>

  </div>
  </tr>

  <div class="radio">
    <tr>
      <td>
&#13;
&#13;
&#13;