JQuery:如何检查复选框是否被选中并向字段添加属性

JQuery: how to check if checkbox is checked and add attributes to field

本文关键字：属性 添加 字段 是否 复选框 何检查 检查 JQuery      更新时间：2023-09-26

我正在检查是否选中了复选框，如果选中了，那么我想将"required"属性添加到相邻的文本字段中。我尝试了两种不同的方法，都没有成功。以下是表单元素和我的两次JQuery尝试。

这两者都不会真正触发事件。我的浏览器要么什么都不做，要么触发一个"传递给getElementById（）的空字符串"事件

表单元素：

  <div class="col-sm-5">
            <label id="checkboxNumber-label" class="toplabel" for="checkboxNumber">Checkbox</label>
            <g:textField name="checkboxNumber" value="${...checkboxNumber}" class="form-control" required="" aria-labelledby="checkboxNumber-label"/>
            <label class="checkbox-inline">
                <g:checkBox name="checkboxYesNo" id="checkboxYesNo" value="${...checkboxYesNo}" onclick="chkboxYesChecked()"/> 
            </label>
        </div>
        <div class="col-sm-5">
            <label id="someTextField-label" class="toplabel" for="someTextField">Some Text Field Here</label>
            <g:textField name="someTextField" id="someTextField" value="${...someTextField}" class="form-control" aria-labelledby="someTextField-label"/>
        </div>

JQuery:

function chkboxYesChecked(){
        if($('#checkboxYesNo').prop('checked')){
            $('#someTextField').prop('required',true);
            $('#someTextField').append('<span class="required-indicator">*</span>');
        }else{
            $('#someTextField').removeAttr('required');
        }
           }

$(document).ready(function() {    
    $('#checkboxYesNo').click(function() {
        if($(this).is(":checked"))
        {
            $('#someTextField').prop('required',true);
            $('#someTextField').append('<span class="required-indicator">*</span>');
        } else {
            $('#someTextField').removeAttr('required');
        }
    });
});

对于您的标记，这将变得更加复杂。

$(document).on("click", ".checkbox-inline :checkbox", function () {
    var $nextTextbox = $(this).closest("div").next("div").find(":text").first();
    if (this.checked) {
        $nextTextbox.prop("required", true).after('<span class="required-indicator">*</span>');
    } else {
        $nextTextbox.prop("required", false).next('.required-indicator').remove();
    }
});

票据

  • 此方法使用事件委派
  • 这里没有涉及ID，因为我想你的页面上不止一次需要相同的东西。将其绑定到特定的元素ID会适得其反
  • 这种方法依赖于示例Grails模板中的特定文档结构。如果您想要更灵活、更易于阅读的内容，请更改HTML
  • 这适用于在紧接着的<div>中具有文本字段的所有复选框。在你的元素上使用CSS类来过滤它/使它只应用于特定的元素
  • 如果后面没有带文本框的<div>，则函数不执行任何操作
  • CCD_ 3是多余的。您不需要jQuery来确定是否检查了当前DOM元素。CCD_ 4要简单得多并且具有相同的效果
  • 不要使用内联事件处理程序（onclick="..."）。永远

看看它在行动：

$(document).on("click", ".checkbox-inline :checkbox", function () {
    var $nextTextbox = $(this).closest("div").next("div").find(":text").first();
    if (this.checked) {
        $nextTextbox.prop("required", true).after('<span class="required-indicator">*</span>');
    } else {
        $nextTextbox.prop("required", false).next('.required-indicator').remove();
    }
});
input[required] {
    background-color: #FFD1D1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-5">
    <label id="checkboxNumber-label" class="toplabel" for="checkboxNumber">Checkbox</label>
    <input type="text" name="checkboxNumber" value="${...checkboxNumber}" class="form-control" required="" aria-labelledby="checkboxNumber-label" />
    <label class="checkbox-inline">
        <input type="checkbox" name="checkboxYesNo" id="checkboxYesNo" value="${...checkboxYesNo}" />
    </label>
</div>
<div class="col-sm-5">
    <label id="someTextField-label" class="toplabel" for="someTextField">Some Text Field Here</label>
    <input type="text" name="someTextField" id="someTextField" value="${...someTextField}" class="form-control" aria-labelledby="someTextField-label" />
</div>

相关文章：