html 复选框添加时为空,修改复选框<div class="form-group"> <label class="col-sm-3 control-label">专长：</label> <div class="col-sm-8" th:with="type=${@dict.getType('xqd_zc_lx')}"> <label th:each="dict : ${type}" class="check-box"> <input name="zhuanchang" type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}" th:attr="checked=${jcyJcyxx.zhuanchang.contains(dict.dictValue)?true:false}"> </label> </div> </div>为空 修改时报错

你提供的代码中，复选框添加时为空，这可能是因为在添加时`jcyJcyxx.zhuanchang`未被初始化，因此`contains`方法会返回`false`。你可以在添加时进行初始化，例如：

jcyJcyxx.setZhuanchang(new ArrayList<String>());

至于修改时报错，我需要更多的信息才能确定问题所在。请提供报错信息和修改的代码，这样我才能更准确地帮助你解决问题。

相关问题

html中thymeleaf模板,添加页面,判断如果改变下拉框id="xqdmc"的值为1 , 复选框 <div class="col-sm-9" th:with="type=${@dict.getType('xqd_jcy_lb')}"> <label th:each="dict : ${type}" class="check-box"> <input name="fenlei" type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}" > </label> </div> name="fenlei"重置，可选的值为11,12,13,14,15。并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为2 , 复选框 name="fenlei"重置，可选的值为12 ，并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为10, 复选框name="fenlei"重置,可选的值为32,并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为11, 复选框name="fenlei"重置,可选的值为21,22,并默认是选中状态,其它值不可选。判断如果改变下拉框id="xqdmc"的值为12, 复选框name="fenlei"重置,可选的值为21,22,并默认是选中状态,其它值不可选。

可以通过Thymeleaf中的条件判断语句th:if和th:unless实现上述处理逻辑。具体代码如下：

<div class="form-group">
    <label class="col-sm-3 control-label">选区名称：</label>
    <div class="col-sm-9">
        <select id="xqdmc" name="xqdmc">
            <option value="1">选区1</option>
            <option value="2">选区2</option>
            <option value="10">选区10</option>
            <option value="11">选区11</option>
            <option value="12">选区12</option>
        </select>
    </div>
</div>

<div class="form-group">
    <label class="col-sm-3 control-label">分类：</label>
    <div class="col-sm-9" th:with="type=${@dict.getType('xqd_jcy_lb')}">
        <label th:each="dict : ${type}" class="check-box">
            <input type="checkbox" th:value="${dict.dictValue}" th:text="${dict.dictLabel}"
                th:checked="${#strings.contains(fenlei, dict.dictValue)}" th:disabled="${#strings.contains(fenlei, dict.dictValue) and not #strings.contains(fenlei, defaultFenlei)}">
        </label>
    </div>
</div>

<script th:inline="javascript">
    /* 定义默认可选的分类 */
    var defaultFenlei = ["11", "12", "13", "14", "15"];

    /* 当选择选区1时，类型可选值为11,12,13,14,15 */
    var xqdmc1Fenlei = ["11", "12", "13", "14", "15"];

    /* 当选择选区2时，类型可选值为12 */
    var xqdmc2Fenlei = ["12"];

    /* 当选择选区10时，类型可选值为32 */
    var xqdmc10Fenlei = ["32"];

    /* 当选择选区11或12时，类型可选值为21,22 */
    var xqdmc11_12Fenlei = ["21", "22"];

    /* 监听选区名称下拉框改变事件 */
    $("#xqdmc").change(function() {
        /* 获取当前选中的选区名称 */
        var xqdmc = $(this).val();

        /* 根据选中的选区名称设置可选的分类 */
        if (xqdmc === "1") {
            defaultFenlei = xqdmc1Fenlei;
        } else if (xqdmc === "2") {
            defaultFenlei = xqdmc2Fenlei;
        } else if (xqdmc === "10") {
            defaultFenlei = xqdmc10Fenlei;
        } else if (xqdmc === "11" || xqdmc === "12") {
            defaultFenlei = xqdmc11_12Fenlei;
        }

        /* 重置分类复选框 */
        $("input[name='fenlei']").prop("checked", false);
        $("input[name='fenlei']").prop("disabled", true);

        /* 设置默认可选的分类 */
        $.each(defaultFenlei, function(index, value) {
            $("input[name='fenlei'][value='" + value + "']").prop("checked", true);
            $("input[name='fenlei'][value='" + value + "']").prop("disabled", false);
        });
    });
</script>

上述代码中，首先定义了默认可选的分类数组defaultFenlei和根据选中的选区名称设置可选的分类数组xqdmc1Fenlei、xqdmc2Fenlei、xqdmc10Fenlei、xqdmc11_12Fenlei，然后通过Thymeleaf的条件判断语句th:if和th:unless以及JavaScript监听下拉框改变事件来实现动态设置分类复选框的可选状态和默认选中状态的功能。对于已经选中的分类，通过设置th:checked属性为true来保持其选中状态，同时设置th:disabled属性为true来禁止其再次选择。

基于bootstrap3 生成一个form表单配置页面，字段有接口id、接口名称、接口类名称、接口路径、有效标志、创建时间、修改时间、操作人、有复选框，可以新增、修改、删除，可以根据接口名称、接口类名称、接口id、接口路径及创建时间和修改时间查询，而且有form-data的ajax后台交互js

好的，我理解你的要求了。首先，你需要先引入Bootstrap3的CSS和JS文件，以及jQuery和Bootstrap3的JS依赖文件，代码如下：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

然后，你需要创建一个表单，代码如下：

<div class="container">
  <h2>接口配置</h2>
  <form class="form-horizontal" id="interface-form">
    <div class="form-group">
      <label class="control-label col-sm-2" for="interface-id">接口ID:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="interface-id" name="interface-id" placeholder="请输入接口ID">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="interface-name">接口名称:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="interface-name" name="interface-name" placeholder="请输入接口名称">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="interface-class">接口类名称:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="interface-class" name="interface-class" placeholder="请输入接口类名称">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="interface-path">接口路径:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="interface-path" name="interface-path" placeholder="请输入接口路径">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="is-valid">有效标志:</label>
      <div class="col-sm-10">
        <label class="checkbox-inline"><input type="checkbox" id="is-valid" name="is-valid" value="1">是</label>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="create-time">创建时间:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="create-time" name="create-time" placeholder="请输入创建时间">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="update-time">修改时间:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="update-time" name="update-time" placeholder="请输入修改时间">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="operator">操作人:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="operator" name="operator" placeholder="请输入操作人">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">提交</button>
      </div>
    </div>
  </form>
</div>

接下来，你需要编写一个AJAX请求，将表单数据提交到后台，代码如下：

$(document).ready(function() {
  // 提交表单
  $('#interface-form').submit(function(e) {
    e.preventDefault();
    var formData = $(this).serialize();
    $.ajax({
      url: '/api/interface',
      type: 'POST',
      data: formData,
      dataType: 'json',
      success: function(data) {
        alert('提交成功！');
      },
      error: function() {
        alert('提交失败！');
      }
    });
  });
});

最后，你需要编写一个查询接口的AJAX请求，将查询条件提交到后台，并将返回的数据渲染到页面中，代码如下：

$(document).ready(function() {
  // 查询接口
  $('#search-btn').click(function() {
    var interfaceId = $('#interface-id-search').val();
    var interfaceName = $('#interface-name-search').val();
    var interfaceClass = $('#interface-class-search').val();
    var interfacePath = $('#interface-path-search').val();
    var createTime = $('#create-time-search').val();
    var updateTime = $('#update-time-search').val();
    $.ajax({
      url: '/api/interface',
      type: 'GET',
      data: {
        'interfaceId': interfaceId,
        'interfaceName': interfaceName,
        'interfaceClass': interfaceClass,
        'interfacePath': interfacePath,
        'createTime': createTime,
        'updateTime': updateTime
      },
      dataType: 'json',
      success: function(data) {
        // 渲染数据到页面
      },
      error: function() {
        alert('查询失败！');
      }
    });
  });
});

以上就是基于Bootstrap3生成一个form表单配置页面的代码，你可以根据需要进行修改和优化。