jQuery group of checkbox issue

Question

У меня есть две группы из checkbox newBuilding & oldBuilding.

1. Идея здесь Я могу выбрать флажок только для одной группы.
2. В каждой группе есть флажок в другой области, поэтому я, когда нажимаю на нее, будет показывать и скрывать текстовое поле рядом с ним.

Теперь для достижения первой точки, позволяет, например, что мы уже имеем oldBuilding флажков проверены и я, если я нажимаю один из newBuilding флажка, то он удалит чек из oldBuilding группы, но newBuilding флажка не будет проверен но просто получить фокус, Я должен нажать еще раз, чтобы проверить.

Что я узнал, что вышеупомянутая проблема возникает, когда я вызываю событие триггера. Как я могу преодолеть этот вопрос

Код для другой области

$("#chkOldBuildingOtherAreas").change(function() { 
    if ($("#chkOldBuildingOtherAreas").is(":checked")) 
    $("#txOldOtherAreas").show(); 
    else 
    $("#txOldOtherAreas").hide(); 
    }); 

$("#chkNewBuildingOtherAreas").change(function() { 
    if ($("#chkNewBuildingOtherAreas").is(":checked")) 
    $("#txNewOtherAreas").show(); 
    else 
    $("#txNewOtherAreas").hide(); 
}); 

Код для удаления галочки с других групп

$("input[name='oldBuilding']").change(function() { 
    if ($("input[name='newBuilding']:checked").length > 0) { 
    $("input[name='newBuilding']").removeAttr('checked'); 
    $("#chkNewBuildingOtherAreas").trigger("change"); 
    } 
}); 

$("input[name='newBuilding']").change(function() { 
    if ($("input[name='oldBuilding']:checked").length > 0) { 
    $("input[name='oldBuilding']").removeAttr('checked'); 
    $("#chkOldBuildingOtherAreas").trigger("change"); 
    } 
}); 

Мой jsfiddle

https://jsfiddle.net/milindsaraswala/wchrwjnx/

Answer 1

https://jsfiddle.net/1ny36nwL/4/

var groups = ['.oldGroup', '.newGroup']; 
$(groups.join(',')).find('input[type=text]').hide(); 

function resetGroup(selector) { 
    //clear and hide texts 
    $('input[type=text]', selector).val('').hide(); 
    //uncheck boxes 
    $('input[type=checkbox]', selector).removeAttr('checked'); 
} 

$("input[name='oldBuilding']").change(function(e) { 
    if (this.id == 'chkOldBuildingOtherAreas') { 
     $("#txOldOtherAreas").toggle(); 
    } 
    resetGroup('.newGroup'); 
}); 

$("input[name='newBuilding']").change(function(e) { 
    if (this.id == 'chkNewBuildingOtherAreas') { 
     $("#txNewOtherAreas").toggle(); 
    } 
    resetGroup('.oldGroup'); 
}); 

, как вы можете видеть, что я добавил groups вар, который может содержать несколько групп (не только два), но нужно изменить немного больше для этого кода для работы

вам нужно определить id/class текущей группы примерно на $(this).closest('.form-group').id и сбросить каждую группу, кроме текущей группы. таким образом, вы можете оставить только одну функцию изменения, которая будет универсальной.

oh и вам также необходимо добавить некоторый класс для флажка, который содержит ввод текста, и если этот флажок щелкнут, переключите переключатель для ввода. так что это будет не if (this.id == 'chkNewBuildingOtherAreas') {, а что-то вроде if ($(this).hasClass('has-input'))

Answer 2

Вы можете попробовать следующий код для исправления проблемы (проверено в скрипке):

$('#txNewOtherAreas, #txOldOtherAreas').hide(); 

$('input[name="oldBuilding"]').on('click', function(){ 
    if($('input[name="newBuilding"]').is(':checked')){ 
     $('input[name="newBuilding"]').removeAttr('checked'); 
     $('#txNewOtherAreas').hide(); 
    } 
}); 

$('input[name="newBuilding"]').on('click', function(){ 
    if($('input[name="oldBuilding"]').is(':checked')){ 
     $('input[name="oldBuilding"]').removeAttr('checked'); 
     $('#txOldOtherAreas').hide(); 
    } 
}); 

$('#chkNewBuildingOtherAreas').on('click', function() { 
    if($(this).is(':checked')){ 
     $('#txNewOtherAreas').show(); 
    } else { 
     $('#txNewOtherAreas').hide(); 
    } 
}); 

$('#chkOldBuildingOtherAreas').on('click', function() { 
    if($(this).is(':checked')){ 
     $('#txOldOtherAreas').show(); 
    } else { 
     $('#txOldOtherAreas').hide(); 
    } 
}); 

Answer 3

Попробуйте заменить это в своем коде. Он должен работать.

    $("#txOldOtherAreas").hide(); 
        $("#txNewOtherAreas").hide(); 
        $("input[name='oldBuilding']").change(function (e) { 
         $("input[name='newBuilding']").removeAttr('checked'); 
         e.target.checked = true; 
         if (e.target.id == "chkOldBuildingOtherAreas") { 
          $("#txOldOtherAreas").show(); 
          $("#txNewOtherAreas").hide(); 
         } else { 
          $("#txNewOtherAreas").hide(); 
         } 
        }); 
        $("input[name='newBuilding']").change(function (e) { 
         $("input[name='oldBuilding']").removeAttr('checked'); 
         e.target.checked = true; 
         if (e.target.id == "chkNewBuildingOtherAreas") { 
          $("#txNewOtherAreas").show(); 
          $("#txOldOtherAreas").hide(); 
         } else { 
          $("#txOldOtherAreas").hide(); 
         } 
        });