jQueryグループのチェックボックスの問題

Question

私は2つのグループのチェックボックスを持っていますnewBuilding & oldBuildingです。

1. ここでのアイデアは、グループの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(); 
}); 

他のグループ

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'); 
}); 

は、あなたが見ることができるように私は（ない2つだけ）を複数のグループを含めることができgroups VARを追加しましたが、コードは

を動作させることのためにもう少しを変更する必要があります

現在のグループのID /クラスを$(this).closest('.form-group').idなどで検出し、現在のグループ以外のすべてのグループをリセットする必要があります。そのようにしてユニバーサルになる変更機能を1つだけ残すことができます。

ohまた、テキスト入力を含むチェックボックスにいくつかのクラスを追加し、そのチェックボックスをクリックすると、入力をトリガーします。だからif (this.id == 'chkNewBuildingOtherAreas') {のようなものではありませんが、if ($(this).hasClass('has-input'))

Answer 2

あなたが試すことができ

$("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からチェックマークを除去するためのコード問題を解決するためのコードを次に示します（フィドルでテスト済み）：

$('#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(); 
         } 
        });