Как вызвать ту же функцию при нажатии одного или нескольких идентификаторов?

Question

У меня есть 4 разных идентификатора и одна функция.Я сталкиваюсь с проблемой, когда я вызываю эту функцию при нажатии на один или несколько различных атрибутов идентификатора.

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

Я мог бы достичь ожидаемого результата, вызвав функцию индивидуально для каждого идентификатора.Как добиться того же результата в 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").change(function() {
  if (this.checked) { /* whatever */ }
})

, как в CSS.

Другой вариант - использование прослушивателя делегата, который ловит событие click в элементе документа.только и проверяет, что было нажато внутри обработчика:

document.addEventListener('click', function(event) {
  if ( ["city_view", "city_create", "city_update", "city_delete"].includes(e.target.id) ) { /* whatever */ }
})

Answer 2

Может быть, вы можете сделать это .. дать класс своим элементам и проверить идентификаторы позже.

$(".All").change(function(){
var id = $(this).attr("id");
if($("#" + id))is(":checked") {
    checkedCountryStateOpt();
    }
});

делает ваш код меньше

Answer 3

Вы можете использовать селектор как одну строку, это работает для меня

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

Answer 4

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