通过单击标签更改输入属性

Change input property by clicking on a label

本文关键字：输入 属性 标签 单击      更新时间：2023-09-26

我需要什么：

如果我单击一个标签，我想在输入中添加一个已签入的标签。

当我尝试时，我收到了两个带有true的警报。这是不正确的，在firebug中，输入字段不会改变。

对于测试，我想输出filterguid，但警报是空的，而且还有两个警报框。

HTML标记：

<li>
 <label>
  <input type="checkbox" filterguid="895f7bc2-d609-4b09-97f9-c09f9fc90d1b"> Weiblich
  </label>
</li>

jQuery:

$('.targetgroup-frame li label').on('click', function(){
   $(this).children().prop('checked', true);
    alert($(this).children().prop('filterguid'));
});

我的jQuery代码正确吗？

谢谢。

HTML-除了在输入上添加一个id以方便jquery定位之外，没有任何更改。

<li>
    <label>
        <input type="checkbox" id="checkbox" filterguid="895f7bc2-d609-4b09-97f9-c09f9fc90d1b"> Weiblich
    </label>
</li>

您不必使用jquery来更改复选框的状态，因为html可以为您更改复选框。

您可以使用以下脚本侦听更改并获取已检查状态和filterguid。

$('#checkbox').change(function() {
    console.log($(this).attr('filterguid'))
    console.log(this.checked)
});

属性标签

与标签元素在同一文档中的可标记表单相关元素的ID。文档中ID与for属性值匹配的第一个此类元素是此标签元素的标记控件。

此外，您应该使用data-attribute而不是attribute。HTM5 不支持attribute

样品

$("#chkTest").on("click", function(){
  console.log($(this).data("filterguid"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<label for="chkTest">
  <input id="chkTest" type="checkbox" data-filterguid="895f7bc2-d609-4b09-97f9-c09f9fc90d1b">Weiblich
</label>

参考文献

  • 标签-MDN
相关文章：