html ラジオボタンの选択値を取得して値段を计算

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html ラジオボタンの选択値を取得して値段を计算相关的知识，希望对你有一定的参考价值。

// Ref:
// * [[js] このコードをもっと簡単にかけませんか？(9403)｜teratail](https://teratail.com/questions/9403)

var dataA = [
  {
    name: '青',
    value: 100
  },
  {
    name: '赤',
    value: 200
  },
  {
    name: '緑',
    value: 300
  },
];

var dataB = [
  {
    name: '金',
    value: 100
  },
  {
    name: '銀',
    value: 200
  },
  {
    name: '銅',
    value: 300
  },
];


var Component = React.createClass({
  getInitialState: function () {
    return {
      resultText: 0
    };
  },
  renderCalc: function () {
    // フォームごとの選択値を取得して その積を計算
    var product = Object.keys(this.refs).map(function (key) {
      return this.refs[key].state.checkedValue;
    }, this).reduce(function (x, y) { return x * y; });

    this.setState({
      resultText: product
    })
  },
  render: function () {
    // memo:
    // <div onChange={this.renderCalc}>
    // と記述すればラジオボタンの選択ごとに値段の計算が実施される
    return (
      <div>
        <Form id="a" data={dataA} checkedValue="100" name="cable" ref="formA"/>
        <Form id="b" data={dataB} checkedValue="100" name="connect" ref="formB"/>
        <input type="button" value="click" onClick={this.renderCalc}/>
        <ResultText value={this.state.resultText}/>
      </div>
    )
  }
});

var Form = React.createClass({
  getInitialState: function () {
    return {
      checkedValue: this.props.checkedValue
    }
  },
  handleChange: function (e) {
    this.setState({
      checkedValue: e.currentTarget.value
    })
  },
  render: function () {
    // 選択されたラジオボタンの値をstate として設定
    // 加えてチェック状態の更新
    var radioButtons = this.props.data.map(function (d) {
      return <input
        type="radio"
        name={this.props.name}
        value={d.value}
        key={d.name}
        onChange={this.handleChange}
        checked={d.value.toString() === this.state.checkedValue}>
          {d.name}
        </input>
    }, this);

    return (
      <form id={this.props.id}>
        {radioButtons}
      </form>
    );
  }
});

var ResultText = React.createClass({
  getDefaultProps: function () {
    return {
      value: 0
    };
  },
  render: function () {
    if (this.props.value === 0) {
      return (
        <p>ここに値段が表示されます</p>
      )
    }

    return (
      <p>
        料金は{this.props.value}円です。
      </p>
    );
  }
});

React.render(<Component/>, document.getElementById('component'));

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="http://fb.me/react-0.13.1.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
  <script type="text/jsx" src="script.js"></script>
</head>
<body>
  <div id="component"></div>
</body>
</html>

以上是关于html ラジオボタンの选択値を取得して値段を计算的主要内容，如果未能解决你的问题，请参考以下文章

php 160720ラジオボタン，チェックボックスのデザイン変更

php 160720ラジオボタンをタブ切り替えのデザインにする

text VCSボタンの文字取得

javascript Issue329：20171130 - no58。予约ボタンと电话ボタンの追従

javascript kintoneアクションボタンの拡张

csharp スタートボタンを押したら音声再生后にステージ选択シーンへ迁移する