$(function() { $("input:checkbox").click(function() { //试题编号 var checked = $(this).attr("id"); //试题对应的分数 var score = $(this).parent().siblings("#subjectScore").text(); //维持已选试题数量 var choosed = parseInt($("#choosed").text()); if(this.checked) { $("#choosed").text(choosed+1); } else { $("#choosed").text(choosed-1); } //获取试卷编号 var examPaperId = $("#examPaperId").text(); if(examPaperId == null || examPaperId.trim() == "") { alert("无法获取试卷信息,暂时无法添加!"); return false; } $.ajax({ type: "POST", data: "subjectID="+checked+"&score="+score+"&exampaperID="+examPaperId, url: "getChooseSubId", success: function(data) { if(data.trim().indexOf("f-exists-") != -1) { zeroModal.show({ title : "错误的提交", content : "此试题已经存在该试卷中了!", width : '200px', height : '130px', overlay : false, ok : true, onClosed : function() { //刷新当前页面 //location.reload(); } }); var choosed = parseInt($("#choosed").text()); $("#choosed").text(choosed-1); //截取题号 var subjectId = data.substring(data.lastIndexOf("-")+1); //移除选择 $("#"+subjectId).replaceWith("<span style='color:red;font-size:12px;'>exists</span>"); return false; } }, error: function(data) { alert("提交失败"); } }); });
时间: 2023-06-20 17:06:21 浏览: 190
这是一段 jQuery 的代码,它监听了多选框的点击事件。当用户点击多选框时,它会获取试题的编号和对应的分数,然后将已选试题的数量加1。接着,它会获取试卷的编号并发送一个 AJAX 请求,将选中的试题的编号、分数和试卷的编号一起发送给服务器。如果服务器返回的数据中包含"f-exists-"字符串,说明这道试题已经存在于该试卷中,此时会弹出一个提示框告诉用户这一信息,并将已选试题的数量减1,同时将该试题的多选框替换成一个文本标记。如果服务器返回的数据不包含"f-exists-"字符串,说明该试题可以被添加到试卷中。
相关问题
<input type="checkbox" id="dt" />
JavaScript中的`<input type="checkbox" id="dt" />`是一个复选框元素。该元素可以让用户选择或取消选择一个或多个选项。通过为复选框元素添加事件监听器,可以实现一些功能,如全选/反选等。
以下是一个示例代码,展示了如何使用JavaScript来实现复选框的全选/反选功能:
```javascript
// 获取复选框元素
var checkbox = document.getElementById('dt');
// 获取所有要控制的复选框元素
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
// 添加点击事件监听器
checkbox.addEventListener('click', function() {
// 遍历所有复选框元素
checkboxes.forEach(function(checkbox) {
// 将所有复选框的选中状态设置为与全选复选框相同
checkbox.checked = this.checked;
}, this);
});
```
在上面的代码中,首先通过`document.getElementById`方法获取到id为"dt"的复选框元素。然后,通过`document.querySelectorAll`方法获取到所有要控制的复选框元素。接下来,我们给全选复选框添加了一个点击事件监听器。当全选复选框被点击时,遍历所有要控制的复选框元素,并将它们的选中状态设置为与全选复选框相同。
这段代码的执行原理是,当全选复选框被选中时,它的`checked`属性为`true`,遍历所有要控制的复选框元素,并将它们的`checked`属性也设置为`true`,从而实现全选的效果。同样地,当全选复选框被取消选中时,它的`checked`属性为`false`,遍历所有要控制的复选框元素,并将它们的`checked`属性也设置为`false`,从而实现取消全选的效果。
需要注意的是,代码中使用了`querySelectorAll`方法来获取所有要控制的复选框元素。这里的选择器是`input[type="checkbox"]`,表示选择所有`type`属性为"checkbox"的`input`元素。你可以根据实际情况修改选择器。
相关问题:如何在页面加载时自动选中某个复选框?如何监听复选框的状态变化,并触发相应的事件?如何实现复选框的样式改变?<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [javascript实现复选框全选或反选](https://download.csdn.net/download/weixin_38740827/13616914)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [HTML基础](https://blog.csdn.net/weixin_30539835/article/details/96686204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
<script> //反选 function changeCheck() { // 获取所有的复选框元素 var checkboxs = document.getElementsByTagName('input'); // 遍历所有复选框 for (var i = 0; i < checkboxs.length; i++) { // 如果当前元素是复选框,而且它的类型是checkbox if (checkboxs[i].type == 'checkbox') { // 判断当前复选框是否选中 if (checkboxs[i].checked) { // 如果选中,就取消选中 checkboxs[i].checked = false; } else { // 如果没有选中,就选中它 checkboxs[i].checked = true; } } } } $(function() { // 删除功能 $(".delete_item").click(function() { $(this).closest("tr").remove(); }); // 批量删除功能 $("#deleteAll").click(function() { $(".delete_item:checked").each(function() { $(this).closest("tr").remove(); }); }); }); </script> </head> <body> <table> <thead> <tr> <th><button type="checkbox" id="allsel" onclick="changeCheck(this)">反选</button></th> <th>用户ID</th> <th>爱好</th> <th>家庭住址</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="check_item"></td> <td>1</td> <td>跑步</td> <td>江苏省无锡市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check_item"></td> <td>2</td> <td>打球</td> <td>江苏省南京市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check_item"></td> <td>3</td> <td>跳舞</td> <td>安徽省合肥市</td> <td><button class="delete_item">删除</button></td> </tr> <tr> <td><button class="deleteAll">批量删除</button></td> </tr>将批量删除改正确
您需要将代码中的`$(".delete_item:checked")`修改为`$(".check_item:checked")`,因为复选框的class是`check_item`而不是`delete_item`。修改后的代码如下:
```
$(function() {
// 删除功能
$(".delete_item").click(function() {
$(this).closest("tr").remove();
});
// 批量删除功能
$(".deleteAll").click(function() {
$(".check_item:checked").each(function() {
$(this).closest("tr").remove();
});
});
});
```
另外,您需要将批量删除按钮所在的行也放入表格中,代码如下:
```
<table>
<thead>
<tr>
<th><button type="checkbox" id="allsel" onclick="changeCheck(this)">反选</button></th>
<th>用户ID</th>
<th>爱好</th>
<th>家庭住址</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>1</td>
<td>跑步</td>
<td>江苏省无锡市</td>
<td><button class="delete_item">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>2</td>
<td>打球</td>
<td>江苏省南京市</td>
<td><button class="delete_item">删除</button></td>
</tr>
<tr>
<td><input type="checkbox" class="check_item"></td>
<td>3</td>
<td>跳舞</td>
<td>安徽省合肥市</td>
<td><button class="delete_item">删除</button></td>
</tr>
<tr>
<td><button class="deleteAll">批量删除</button></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
```
阅读全文