个人中心
gpt4 book ai didi

javascript - Jquery 不起作用 - 单选按钮

转载 作者：行者123 更新时间：2023-11-27 23:29:31 25 4
gpt4 key购买 nike

我正在尝试创建一个网络应用程序，根据提供的参数查找所选形状的区域。

所以我半途而废了。

单击单选按钮时，参数文本框应加载到值 div 中。我尝试使用 jquery 来实现此功能，但是当选中单选按钮时，文本框不会加载到 div 中。

请帮忙。我找不到我哪里出错了。

JQuery

$(document).ready(function(){
    $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="circle")
        {
           $('.values').innerHTML="<table class='table table-default'><tbody><tr><td>
           <label for='circlerad'>Radius:</label></td><td><input type='text'
            class='form-control' name='circlerad' maxlength='10'></td></tr></tbody>
            </table>";
        }
        if($(this).attr("value")=="square")
        {
            $('.values').innerHTML="<table class='table table-default'><tbody><tr><td>
           <label for='sqside'>Side-length</label></td><td><input type='text'
            class='form-control' name='sqside' maxlength='10'></td></tr></tbody>
            </table>";
        }
        if($(this).attr("value")=="rectangle")
        {
            $('.values').innerHTML="<table class='table table-default'><tbody><tr><td>
           <label for='reclen'>Length:</label></td><td><input type='text'
            class='form-control' name='reclen' maxlength='10'></td></tr>
            <tr><td>
           <label for='recbr'>Breadth:</label></td><td><input type='text'
            class='form-control' name='recbr' maxlength='10'></td></tr>
            </tbody>
            </table>";
        }
    });
});

html/php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Area Finder</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

  <?php

    echo("<center><h1>Area Finder!</h1></center><div class='conatiner'><div class='row'><form role='form' action='./arearesult.php' method='POST'><div class='form-group'><div class='panel panel-primary col-xs-3'><div class='panel-heading'>Select a shape</div><div class=' panel-body'>");
    echo("<table class='table table-default'><tbody>");
    echo("<tr><td>Circle</td><td><input type='radio' name=shape value='circle'></td></tr>
      <tr><td>Square</td><td><input type='radio' name=shape value='square'></td></tr>
      <tr><td>Rectangle</td><td><input type='radio' name=shape value='rectangle'></td></tr></tbody></table></div></div></div>");
    echo("<div class='col-xs-1'></div><div class='panel panel-primary col-xs-5'><div class='panel-heading'>Enter values</div>");
    echo("<div class='values panel-body'><table class='table table-default'><tbody>");

    echo("</form></div></div>");
  ?>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src='js/parameters.js'></script>
  </body>
</html>

area finder webpage

最佳答案

问题出在 $('.values').innerHTML 赋值上。

应该是这样的。

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    if ($(this).attr("value") == "circle") {
      $('.values').html("<table class='table table-default'><tbody><tr><td>" +
    "<label for='circlerad'>Radius:</label></td><td><input type='text' " +
    "class='form-control' name='circlerad' maxlength='10'></td></tr></tbody>" +
    "</table>");
    }
    if ($(this).attr("value") == "square") {
      $('.values').html("<table class='table table-default'><tbody><tr><td>" +
    "<label for='sqside'>Side-length</label></td><td><input type='text'" +
    "class='form-control' name='sqside' maxlength='10'></td></tr></tbody>" +
    "</table>");
    }
    if ($(this).attr("value") == "rectangle") {
      $('.values').html("<table class='table table-default'><tbody><tr><td>" +
    "<label for='reclen'>Length:</label></td><td><input type='text'" +
    "class='form-control' name='reclen' maxlength='10'></td></tr>" +
    "<tr><td>" +
    "<label for='recbr'>Breadth:</label></td><td><input type='text'" +
    "class='form-control' name='recbr' maxlength='10'></td></tr>" +
    "</tbody>" +
    "</table>");
    }
  });
});

更新:更改为 $('.values').html() 请参阅工作插件 https://jsfiddle.net/u0hd5Lmq/

阅读https://davidwalsh.name/multiline-javascript-strings

关于javascript - Jquery 不起作用 - 单选按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34690639/

25 4 0
文章推荐： javascript - 将对象数据添加到 html 表单字段
文章推荐： c++ - 如何将结构作为指针传递？ [C++]
文章推荐： c++ - fatal error LNK1120 : 1 unresolved externals
文章推荐： c++ - 如何为内部类声明运算符<<
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com