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 。与其他复选框及其隐藏的表单等价物类似

我尝试从this SO answer修改jQuery触发器，但每当选中复选框时，所有隐藏字段都会更新 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

看起来$.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);
        }
    });
});

Answer 4

尝试根据其属性

搜索隐藏字段

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

这里是fiddle

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

4 个答案: