Question

我有一个带有radiobuttons，复选框和文本字段的表单。例如，第1组包括无线电按钮。

<ul class="radios">
    <li><input id="const-style" class="radio-form"  type="radio" name="material" value="w1" /><span>test</span></li>
    <li><input id="const-style" class="radio-form"  type="radio" name="material" value="w2" /><span>test2</span></li>
    <li><input id="const-style" class="radio-form"  type="radio" name="material" value="w3" /><span>test3</span></li>  
    ...      
</ul>

第2组包含复选框。

<ul class="checks">                                               
    <li><input id="const-style1" class="checkbox-form"  type="checkbox" name="style[]" value="ch1" />ch1</li>
    <li><input id="const-style2" class="checkbox-form"  type="checkbox" name="style[]" value="ch2" />ch2</li>
    <li><input id="const-style3" class="checkbox-form"  type="checkbox" name="style[]" value="ch3" />ch3</li>   
    ...    
</ul>

第3组包含文本字段（姓名，姓氏，电子邮件）。

<ul class="form-info">  
    <li><input id="name" class="text inline" type="Name" name="name" size="25" placeholder="Name" maxlength="30" autocomplete="off"/></li>
    <li><input id="SurName" class="text inline" type="SurName" name="surname" size="25" placeholder="Surname" maxlength="30" autocomplete="off"/></li>
    <li><input id="email" class="text inline" type="Email" name="email" size="25" placeholder="Email" maxlength="30" autocomplete="off"/></li>
</ul>

当用户点击至少1个复选框或单选按钮或感受到文本字段时，脚本会向变量添加+1（ 1个最大点在孔组上），之后它应显示工具提示这个柜台（任何地方）。如果他/她取消选中他/她的选择（并且具有复选框或文本字段或单选按钮的组变为未选中），则它应该子结构1点。

如何使用JS或Jquery做到这一点？

Answer 1

查看小提琴https://jsbin.com/waluyicapa/edit?html,js,console,output。

HTML

class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      checked: false
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(checked) {
    this.setState({checked: checked});
  }

  render() {
    return (
      <Child checked={this.state.checked} handleClick={this.handleClick}/>
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick2 = this.handleClick2.bind(this);
  }

  handleClick2(event) {
    this.props.handleClick(event.target.checked);
  }

  render() {
    return (
      <p>
        <input
          type="checkbox"
          checked={this.props.checked}
          onChange={this.handleClick2}
        />
        {" "}
        Click me
      </p>
    );
  }
}

JS

  <ul class="radios form-group" is-filled="false">
    <li><input id="const-style" class="radio-form"  type="radio" name="material" value="w1" /><span>test</span></li>
    <li><input id="const-style" class="radio-form"  type="radio" name="material" value="w2" /><span>test2</span></li>
    <li><input id="const-style" class="radio-form"  type="radio" name="material" value="w3" /><span>test3</span></li>  
    ...      
</ul>

<ul class="checks form-group" is-filled="false" >                                               
    <li><input id="const-style1" class="checkbox-form"  type="checkbox" name="style[]" value="ch1" />ch1</li>
    <li><input id="const-style2" class="checkbox-form"  type="checkbox" name="style[]" value="ch2" />ch2</li>
    <li><input id="const-style3" class="checkbox-form"  type="checkbox" name="style[]" value="ch3" />ch3</li>   
    ...    
</ul>

  <ul class="form-info form-group" is-filled="false">  
    <li><input id="name" class="text inline" type="Name" name="name" size="25" placeholder="Name" maxlength="30" autocomplete="off"/></li>
    <li><input id="SurName" class="text inline" type="SurName" name="surname" size="25" placeholder="Surname" maxlength="30" autocomplete="off"/></li>
    <li><input id="email" class="text inline" type="Email" name="email" size="25" placeholder="Email" maxlength="30" autocomplete="off"/></li>
</ul> 

  <p id ="count">
    </p>

JS：当检查组中的复选框1时，向变量添加+1（显示工具提示）

1 个答案: