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是唯一的而且类不是。因此，使用类，如果选中一个复选框，则会显示与该类相关的属性。

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

Answer 1

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

$(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选择器实现你想要的一切。

工作示例：

＆＃13;

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

＆＃13;

input {
display: block;
}

＆＃13;

<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>

＆＃13;

当你不知道ID时，Javascript getElementById

更新

3 个答案: