<form action="" class="s-form"> <div class="s-field"> <div class="left">数据集名称</div> <div class="right"> <input type="text" name="" id="" class="s-input" style="width: 380px; height: 32px;"> </div> </div> <div class="s-field"> <div class="left">标注类型</div> <div class="right"> <div class="radio-item"> <input type="radio" name="object1" id=""> <label for="object1">物体检测</label> </div> <div class="radio-item"> <input type="radio" name="object2" id=""> <label for="object2">语义分割</label> </div> </div> </div> <button class="s-button">创建并导入</button> <button class="s-button">完成创建</button> <button class="s-button">取消</button> </form>优化代码，可以改变标签类名及id名，实现物体检测和语义分割的单选框只能选择一个，将用户输入的数据集名称和选择的单选框（通过type的值返回。type=0是物体检测，type=1是语义分割）通过Ajax传递给后台，

以下是优化后的代码：

HTML代码：

<form action="" class="create-dataset-form">
<div class="form-field">
<div class="label">数据集名称</div>
<div class="input">
<input type="text" name="dataset-name" class="s-input" style="width: 380px; height: 32px;">
</div>
</div>
<div class="form-field">
<div class="label">标注类型</div>
<div class="input">
<div class="radio-item">
<input type="radio" name="annotation-type" id="object-detection" value="0">
<label for="object-detection">物体检测</label>
</div>
<div class="radio-item">
<input type="radio" name="annotation-type" id="semantic-segmentation" value="1">
<label for="semantic-segmentation">语义分割</label>
</div>
</div>
</div>
<button type="submit" class="s-button create-and-import-btn">创建并导入</button>
<button type="submit" class="s-button create-btn">完成创建</button>
<button type="button" class="s-button cancel-btn">取消</button>
</form>

JavaScript代码：

// 获取表单元素
const form = document.querySelector('.create-dataset-form');
const datasetNameInput = form.querySelector('input[name="dataset-name"]');
const annotationTypeRadios = form.querySelectorAll('input[name="annotation-type"]');
const createAndImportBtn = form.querySelector('.create-and-import-btn');
const createBtn = form.querySelector('.create-btn');
const cancelBtn = form.querySelector('.cancel-btn');

// 单选框只能选择一个
annotationTypeRadios.forEach((radio) => {
radio.addEventListener('click', () => {
annotationTypeRadios.forEach((r) => {
r.checked = false;
});
radio.checked = true;
});
});

// 创建并导入按钮点击事件处理程序
createAndImportBtn.addEventListener('click', (event) => {
event.preventDefault();
const datasetName = datasetNameInput.value.trim();
const annotationType = getSelectedAnnotationType();
if (!datasetName || !annotationType) {
alert('数据集名称和标注类型不能为空！');
return;
}
createDataset(datasetName, annotationType, true);
});

// 创建按钮点击事件处理程序
createBtn.addEventListener('click', (event) => {
event.preventDefault();
const datasetName = datasetNameInput.value.trim();
const annotationType = getSelectedAnnotationType();
if (!datasetName || !annotationType) {
alert('数据集名称和标注类型不能为空！');
return;
}
createDataset(datasetName, annotationType, false);
});

// 取消按钮点击事件处理程序
cancelBtn.addEventListener('click', () => {
// TODO：取消操作
});

// 获取选中的标注类型
function getSelectedAnnotationType() {
for (let i = 0; i < annotationTypeRadios.length; i++) {
if (annotationTypeRadios[i].checked) {
return annotationTypeRadios[i].value;
}
}
return null;
}

// 创建数据集并导入数据
function createDataset(datasetName, annotationType, importData) {
// TODO：使用Ajax发送请求到后台，创建数据集并导入数据
}