不知道 ID 时的 Javascript getElementById

Question

我正在使用 PHP 为复选框分配一个随机 ID，现在我想检查该复选框的值，但因为我不知道 ID，所以我不知道如何检查它。

所以这里是 HTML：

<input class="citycheck" 
       id="<?php $city_id; // this is randomly generated ?>" 
       type="checkbox" 
       name="<?php echo $city_name"> <?php echo $city ?>

<div class"properties">Some Properties</div>

和我的 Javascript：

<script>
    jQuery(document).ready(function($) {
        // right now I am checking by class
        // show or hide if it is already checked
        if ($(".citycheck").is(':checked'))
            $(".properties").show();
        else
            $(".properties").hide();

        // show or hide if user clicked on the checkbox
        $(".citycheck").click(function() {
            if ($(this).is(":checked")) {
                $(".properties").show();
            } else {
                $(".properties").hide();
            }
        });
    });
</script>

但是因为有很多citycheck类的复选框，当一个被选中时，如果另一个城市没有被选中，属性仍然显示。

如果我还不知道ID，如何通过ID检查复选框的值？

更新

我想要 ID 的原因是因为 ID 是唯一的，而 class 不是。因此，使用类，如果选中一个复选框，它会显示与该类相关的属性。

我对每个城市都有一个复选框，每个城市都有一些属性，如果我点击芝加哥，那么芝加哥的属性就会列出。现在的问题是，如果我检查芝加哥，波士顿的属性也会显示出来。

Answer 1

您可以在您的元素中分配一个伪类，并使用该伪类来查找页面中的所有元素。然后你可以检查其中哪些被检查并做任何需要的事情。通过分配一个伪类，我也对细节做了同样的事情。因为它现在是您的 html 代码，如果有人将类的名称从 citycheck 更改为任何您的 UI 的行为根本不会改变，只要注意移动元素，因为我们依赖 siblings。请看下面的sn-p：

$(function(){
    $('.js-citicheck').on("change", function(){
        var ele = $(this);
        var details = ele.siblings('div.js-details');
        if(ele.is(":checked")){
            details.show();   
        } else {
           details.hide();
        }
    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="citycheck js-citicheck" 
id="berlin" 
        type="checkbox" 
/>
<label for="berlin">Berlin</label>
<div class="details js-details" style="display:none">Berlin details.</div>
</div>
<div>
<input class="citycheck js-citicheck" 
id="london" 
        type="checkbox" 
/>
<label for="london">London</label>
<div class="details js-details" style="display:none">London details.</div>
</div>
<div>
<input class="citycheck js-citicheck" 
id="paris" 
        type="checkbox" 
/>
<label for="paris">Paris</label>
<div class="details js-details" style="display:none">Paris details.</div>
</div>

Answer 2

你可以给 id 添加前缀

<input class="citycheck" 
       id="<?php echo 'id_'.$city_id; ?>" // this is randomly generated 
       type="checkbox" 
       name="<?php echo $city_name"> <?php echo $city ?>

<div class"properties">Some Properties</div>

然后：

var list = document.querySelectorAll('[id^="id_"]'); 

var list = $('[id^="id_"]');

遍历列表并检查它是否被选中

Answer 3

我认为您可以使用简单的 jQuery 选择器来实现您想要的一切。

工作示例：

$(document).ready(function(){

    $('.properties').hide();
    $('.citycheck:checked + .properties').show();

    $('.citycheck').change(function(){
        $(this).next('.properties').toggle();
        alert('The id of this checkbox is: ' + $(this).attr('id'));
    });

});

input {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="sdnflfldja" class="citycheck" type="checkbox" name="Alphaville">
<div class="properties">Some Properties</div>

<input id="sdnfldfj" class="citycheck" type="checkbox" name="Betaville">
<div class="properties">Some Properties</div>

<input id="szdnnadsc" class="citycheck" type="checkbox" name="Gammaville">
<div class="properties">Some Properties</div>

<input id="sallddfa" class="citycheck" type="checkbox" name="Deltaville">
<div class="properties">Some Properties</div>

<input id="adlkfkfddsl" class="citycheck" type="checkbox" name="Epsilonville">
<div class="properties">Some Properties</div>