时间戳

首页 > 解决方案 > 根据值中的文本字符串切换表单元素？

jquery - 根据值中的文本字符串切换表单元素？

问题描述

下面的例子有效：if valueis 1and is checkedshowid="ethnic_other"

切换脚本

$('input[name="ethnic_group"]').on('change', function() {
  $('#ethnic_other').toggle(+this.value === 1 && this.checked);
 }).change();

HTML（缩短示例 - 表单中有 18 个单选按钮）

<fieldset>
    <div class="form__row">
        <label class="form__label">Please tick the box that best describes your ethnic group (2011 census definitions):</label>
        <input id="form1_ethnic_group1" name="ethnic_group" type="radio" value="White - White British"><label for="form1_ethnic_group1">White - White British</label>
        <input id="form1_ethnic_group2" name="ethnic_group" type="radio" value="White - White Irish"><label for="form1_ethnic_group2">White - White Irish</label>
        <input id="form1_ethnic_group3" name="ethnic_group" type="radio" value="White - Gypsy or Irish Traveller"><label for="form1_ethnic_group3">White - Gypsy or Irish Traveller</label>
        <!-- Note: Value is set to 1 -->        
        <input id="form1_ethnic_group4" name="ethnic_group" type="radio" value="1"><label for="form1_ethnic_group4">White - White Other*</label>        
    </div>   
    <div class="form__row" id="ethnic_other">
        <label class="form__label" for="form1_ethnic_group_feedback">* If other please specify</label><input id="form1_ethnic_group_feedback" name="ethnic_group_feedback" class="form__input" title="Ethnic group feedback" type="text">
    </div>
</fieldset>

但是，我想保持与value相同，label每个other单选按钮都包含*. value可以用它代替数字 1 吗？

<fieldset>
    <div class="form__row">
        <label class="form__label">Please tick the box that best describes your ethnic group (2011 census definitions):</label>
        <input id="form1_ethnic_group1" name="ethnic_group" type="radio" value="White - White British"><label for="form1_ethnic_group1">White - White British</label>
        <input id="form1_ethnic_group2" name="ethnic_group" type="radio" value="White - White Irish"><label for="form1_ethnic_group2">White - White Irish</label>
        <input id="form1_ethnic_group3" name="ethnic_group" type="radio" value="White - Gypsy or Irish Traveller"><label for="form1_ethnic_group3">White - Gypsy or Irish Traveller</label>
        <!-- Note: Value is the same as label, contains a * --> 
        <input id="form1_ethnic_group4" name="ethnic_group" type="radio" value="White - White Other*"><label for="form1_ethnic_group4">White - White Other*</label>        
    </div>   
    <div class="form__row" id="ethnic_other">
        <label class="form__label" for="form1_ethnic_group_feedback">* If other please specify</label><input id="form1_ethnic_group_feedback" name="ethnic_group_feedback" class="form__input" title="Ethnic group feedback" type="text">
    </div>
</fieldset>

我已将切换脚本更改为此（见下文），它只工作了一半。是隐藏的#ethnic_other，所以脚本工作到一定程度。但是，当我单击任何带有*作为其值字符串一部分的单选按钮时，它不会切换#ethnic_other可见吗？

$('input[name="ethnic_group"]').on('change', function() {
  $('#ethnic_other').toggle(+this.value === '*' && this.checked);
}).change();

标签： jquery

解决方案

我在您的代码中看到两个问题：

  1. 当您+在值之前设置时，您将值转换为类型编号。但是*是一个字符串。
  2. 您输入的值是“White - White Other*”，而不仅仅是“*”

所以，你的代码应该是这样的：

$('input[name="ethnic_group"]').on('change', function() {
  $('#ethnic_other').toggle(this.value.indexOf('*') === this.value.length-1 && this.checked);
}).change();

推荐阅读