Question

我正在尝试在选中该部分的复选框时进行简单显示，但是由于PHP动态分配了该元素的ID，因此无法保留该元素。

该元素将在foreach循环内，因此将有多个具有动态ID的实例。

示例：

//Laravel blade template
<element id="attrb{{ $elem->id }}> "></element>

//Javascript
if ($("#attrb*ID").is(":checked")) {
    $("#attrbs-container").show();
} else {
    $("#attrbs-container").hide();
}

Answer 1

使用Jquery

$('input[id^="attrb"]').change(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="checkbox" id="attrb1" value="1" />

运行，然后选中复选框。您可以将console.log替换为.show或其他任何内容。

选择器input[id^="attrb"]表示具有input以id开头的^=的{{1}}。如果只有这些复选框，也可以使用attrb，但它的含义不太明确。

更改与点击

input[type="checkbox"]在元素的数据（状态）更改时触发。 change会在您单击时触发。在这种情况下，使用哪个可能并不重要。 click和change的更好示例是使用单选按钮，然后单击已选中的单选按钮。复选框在选中时会取消单击，单选按钮不会太多。我只是习惯使用click而不是change来进行状态更改。

click

$('input[id^="attrb"]').click(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

运行并单击2x收音机。发射两次。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="radio" id="attrb1" value="1" />

$('input[id^="attrb"]').change(function(e){
     
    if($(this).is(':checked'))  console.log($(this).prop('id'));

});

在这里做同样的事情，但是要有所改变。就是这样。

动态vs动态

这里的意思是<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="radio" id="attrb1" value="1" />是在客户端运行时更改的内容，DYNAMIC是静态HTML，其中的ID仅在服务器端更改。对于DYNAMIC，您要像这样使用Dynamic

on

$(someparent).on('change', 'input[id^="attrb"]', function(e){ ... });是一个静态元素，在运行时不会更改。这将使用事件委托和“冒泡”来查找在客户端更改的内容。

我不认为您的意思是DYNAMIC，但我以防万一。

干杯！

Answer 2

如果您使用javascript（在ajax请求之后）分配ID，则可以创建带有回调的函数

function addID(add, callback)

然后使用功能：

addId(function(){
    //dynamically add ID
}, function(){
    // callback function
    if ($(“#attrb*ID”).is(":checked")) {
        $(“#attrbs-container").show();
    } else {
        $(“#attrbs-container").hide();
    }
})

如何获取已动态指定ID的元素的ID？

2 个答案: