根据复选框选择更新表单字段

Question

我有一个包含 6 个复选框和 6 个隐藏文本字段的表单，需要根据复选框选择进行更改

HTML：

<input type="checkbox" value="Auto" id="auto_Auto" name="auto" class="checkbox form_elem_auto"><label for="auto_Auto" id="label_auto">Auto</label>
<br />

<input type="checkbox" value="Home" id="home_Home" name="home" class="checkbox form_elem_home"><label for="home_Home" id="label_home">Home</label>
<br />

<input type="checkbox" value="Life" id="life_Life" name="life" class="checkbox form_elem_life"><label for="life_Life" id="label_life">Life</label>
<br />

<input type="checkbox" value="Health" id="health_Health" name="health" class="checkbox form_elem_health"><label for="health_Health" id="label_health">Health</label>
<br />

<input type="checkbox" value="Medicare" id="medicare_Medicare" name="medicare" class="checkbox form_elem_medicare"><label for="medicare_Medicare" id="label_medicare">Medicare</label>
<br />

<input type="checkbox" value="Renters" id="renters_Renters" name="renters" class="checkbox form_elem_renters"><label for="renters_Renters" id="label_renters">Renters</label>
<br />


<input id="auto_h" name="auto_h" class="hidden" value="FALSE" ><br />
<input id="home_h" name="home_h" class="hidden" value="FALSE" ><br />
<input id="life_h" name="life_h" class="hidden" value="FALSE" ><br />
<input id="health_h" name="health_h" class="hidden" value="FALSE" ><br />
<input id="medicare_h" name="medicare_h" class="hidden" value="FALSE" ><br />
<input id="renters_h" name="renters_h" class="hidden" value="FALSE" >

我希望在选中复选框 id="auto_Auto" name="auto" 时，将隐藏字段更新为 TRUE，并且在未选中时更新/保持为 FALSE。 与其他复选框及其隐藏表单等效项类似

我已经尝试修改jQuery触发器从this SO answer但只要检查复选框，所有隐藏的字段都会使用 true

更新

这是demo

Answer 1

您可以使用此代码定位特定输入：

$("input[type=checkbox]").on('change', function () {
    var name = $(this).attr('name') + '_h';
    $('#' + name).val($(this).is(':checked') ? 'TRUE' : 'FALSE');
}).change();
$("input[type=text]").on('keyup', function () {
    var name = $(this).attr('name').replace(/_h$/, '');
    if ($(this).val()) {
        $('[name="' + name + '"]').prop('checked', true);
    } else {
        $('[name="' + name + '"]').prop('checked', false);
    }
});

FIDDLE

Answer 2

$(function () {
    $("input[type=checkbox]").on('change', function () {
       var name = $(this).attr('name');
       $("#"+name+"_h").val($(this).is(':checked') ? 'TRUE' : 'FALSE'); 

    });
    var name = $(this).attr('name').replace(/_h$/, '');
    if ($(this).val()) {
      $('[name="' + name + '"]').prop('checked', true);
   } else {
      $('[name="' + name + '"]').prop('checked', false);
   }
});

您始终使用名称进行引用。你的隐藏输入有id: CLICKED_OBJECT.name+"_h" 更新：

默认设置为“false”

<input type="text" id="auto_h" name="auto_h" class="hidden" value='FALSE'><br />
<input type="text" id="home_h" name="home_h" class="hidden"  value='FALSE'><br />
<input type="text" id="life_h" name="life_h" class="hidden"  value='FALSE'><br />
<input type="text" id="health_h" name="health_h" class="hidden"  value='FALSE'><br />
<input type="text" id="medicare_h" name="medicare_h" class="hidden"  value='FALSE'><br />
<input type="text" id="renters_h" name="renters_h" class="hidden"  value='FALSE'>

Answer 3

尝试根据属性搜索隐藏字段

$("[name="+$(this).attr('name')+"_h]").val($(this).is(':checked') ? 'TRUE' : 'FALSE');

这是fiddle

Answer 4

看起来$.nextAll 正在为所有字段设置值。

$(function () {
    $("input[type=checkbox]").on('change', function () {

        //$(this).nextAll('.hidden').val($(this).is(':checked') ? 'TRUE' : 'FALSE');
        $('#'+$(this).attr('name')+'_h').val($(this).is(':checked') ? 'TRUE' : 'FALSE');
    });
    $("input[type=text]").on('keyup', function () {
        if ($(this).val()) {
            $(this).prevAll('.auto_h:first').prop('checked', true);
        } else {
            $(this).prevAll('.auto_h:first').prop('checked', false);
        }
    });
});