Question

我有一个带有一些单选按钮和复选框的表单。一些复选框/收音机旁边有一些隐藏的分隔线。只有当用户选择相应的收音机/复选框时，才能看到隐藏的分隔符。

每个收音机/复选框都有一个格式为123:456的值，相应的隐藏分隔符的id属性等于group_123_456

我能够找到分隔符ID值，我需要在每个项目的值（复选框或无线电）中显示/隐藏。

我认为我可以利用change()事件找到方法。我以为我可以评估每个项目。如果检查该项目，则显示相应的div，否则将其隐藏。

这就是我所做的

$("input[type='radio'], input[type='checkbox']").change(function(e) {
    $(this).each(function(index, item){
        var newGroupName = '';
        if( $(item).is(':checked') ){
            console.log( $(item).val() + ' is checked' );
            newGroupName = getGroupElement( $(this).val() );
            $('#' + newGroupName).show();
        } else {
            console.log( $(item).val() + ' is NOT checked' );
            newGroupName = getGroupElement( $(this).val() );
            $('#' + newGroupName).hide();
        }
    });
}).change();

以上代码适用于复选框，但不适用于单选按钮。

我创造了一个小提琴，让你很好地了解我在这里要做的事情https://jsfiddle.net/oke8qLwg/2/

每次使用更改输入值时，如何显示/隐藏正确的分隔符？

https://jsfiddle.net/oke8qLwg/

Answer 1

以下是我为纠正此问题所做的工作

$(":radio").change(function(e) {

        var name = $(this).attr('name');

        $('input[name='+name+']').each(function(index, item){
            applyLogic(item);
        });
});

$(":checkbox").change(function(e) {
        applyLogic( $(this) );
});


function applyLogic(item)
{

    var newGroupName = getGroupElement( $(item).val() );

    if( $(item).is(':checked') ){

        $('#' + newGroupName).show();

    } else {

        $('#' + newGroupName).hide();
    }

}

每次单选按钮更改时，我都会遍历具有相同输入名称的按钮，然后应用显示/隐藏逻辑。

选中复选框或单选按钮时如何显示隐藏字段？

1 个答案: