jQuery組的複選框問題

Question

我有兩組複選框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變種可以包含多個組（不只有兩個），但需要改變多一點的代碼工作

您需要通過$(this).closest('.form-group').id之類的東西檢測當前組的id/class，並重置除當前組以外的每個組。以這種方式，你可以只保留一個，這將是通用

哦變化功能，你還需要添加一些類包含文本輸入複選框，如果該複選框被點擊，輸入觸發切換。所以它不會是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(); 
         } 
        });