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

Answer 2

您可以简单地用逗号分隔选择器：

$("#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 3

也许您可以这样做。.给您的元素一个类，然后再检查ID。

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

使您的代码更少

Answer 4

您可以将选择器用作单个字符串，它对我有用

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

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

4 个答案: