javascript - 单击一个或多个ID时如何调用同一函数？

Question

我有4个不同的ID和一个函数。我在单击一个或多个不同的id属性时调用该函数时遇到问题。

function checkedCountryStateOpt(){
     $("#country_view").prop('checked', true);
     $("#state_view").prop('checked', true);
}

$("#city_view", "#city_create", "#city_update", "#city_delete").click(function(){
    if($(this).is(":checked")) {
       checkedCountryStateOpt();
        }
});

我可以通过在每个id上分别调用函数来达到预期的结果。如何在5行中节省15-20行代码来达到相同的结果。

$("#city_view").change(function(){
    if($(this).is(":checked")) {
    checkedCountryStateOpt();
    }
});

$("#city_create").change(function(){
   if($(this).is(":checked")) {
       checkedCountryStateOpt();
    }
});

$("#city_update").change(function(){
    if($(this).is(":checked")) {
        checkedCountryStateOpt();
    }
});

$("#city_delete").change(function(){
    if($(this).is(":checked")) {
        checkedCountryStateOpt();
        }
});

function checkedCountryStateOpt(){
    $("#country_view").prop('checked', true);
    $("#state_view").prop('checked', true);
}

下面是HTML代码（以防万一）

<!-- location: country master -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-2">
                                        <label>Location: Country Master</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox view_check" id="country_view" value="country_view" <?php if(isset($_GET['edit']) && in_array("country_view", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="country_view" class="css-label">View</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox action_check" id="country_create" value="country_create" <?php if(isset($_GET['edit']) && in_array("country_create", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="country_create" class="css-label">Create</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox update action_check" id="country_update" value="country_update" <?php if(isset($_GET['edit']) && in_array("country_update", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="country_update" class="css-label">Update</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox delete action_check" id="country_delete" value="country_delete" <?php if(isset($_GET['edit']) && in_array("country_delete", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="country_delete" class="css-label">Delete</label>
                                    </div>
                                    <div class="col-sm-3">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox delete action_check" id="csv_upload_loc" value="csv_upload_loc" <?php if(isset($_GET['edit']) && in_array("csv_upload_loc", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="csv_upload_loc" class="css-label">Upload csv (Country-State-City)</label>
                                    </div>
                                </div>
                            </div>

                        <!-- location: state master -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-2">
                                        <label>Location: State Master</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox view_check" id="state_view" value="state_view" <?php if(isset($_GET['edit']) && in_array("state_view", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="state_view" class="css-label">View</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox action_check" id="state_create" value="state_create" <?php if(isset($_GET['edit']) && in_array("state_create", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="state_create" class="css-label">Create</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox update action_check" id="state_update" value="state_update" <?php if(isset($_GET['edit']) && in_array("state_update", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="state_update" class="css-label">Update</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox delete action_check" id="state_delete" value="state_delete" <?php if(isset($_GET['edit']) && in_array("state_delete", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="state_delete" class="css-label">Delete</label>
                                    </div>
                                </div>
                            </div>

                        <!-- location: city master -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-2">
                                        <label>Location: City Master</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox view_check" id="city_view" value="city_view" <?php if(isset($_GET['edit']) && in_array("city_view", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="city_view" class="css-label">View</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox action_check" id="city_create" value="city_create" <?php if(isset($_GET['edit']) && in_array("city_create", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="city_create" class="css-label">Create</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox update action_check" id="city_update" value="city_update" <?php if(isset($_GET['edit']) && in_array("city_update", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="city_update" class="css-label">Update</label>
                                    </div>
                                    <div class="col-sm-1">
                                        <input type="checkbox" name="permissions[]" class="css-checkbox delete action_check" id="city_delete" value="city_delete" <?php if(isset($_GET['edit']) && in_array("city_delete", $existingPermissionsArray)) { ?> checked <?php } ?> />
                                        <label for="city_delete" class="css-label">Delete</label>
                                    </div>
                                </div>
                            </div>

Answer 1

['city_view','city_create','city_update','city_delete'].forEach(function(id){
  document.getElementById(id).addEventListener('change',function(event){
    // on change ...
    console.log(event.detail);
  })
})