设置 JQuery HTML javascript 复选框工作,但不显示为选中状态
Set JQuery HTML javascript Checkbox working but not showing as checked
我试图做的只是检查是否选中了复选框,如果是,请取消选中它。复选框设置正确,但未显示为选中状态。我已经选中了这个,我在<li>
外面放了一个复选框,它工作正常
这是我当前的 HTML:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<title></title>
<link rel="stylesheet" href="Styles/jquery.mobile-1.3.2.min.css" />
<script src="Scripts/jquery-2.0.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="Scripts/jquery.bpopup.min.js"></script>
<script src="Scripts/jquery.mobile-1.3.2.min.js"></script>
<script src="Events.js"></script>
|<script src="Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<style type="text/css" title="currentStyle">
@import "Content/DataTables-1.9.4/media/css/jquery.dataTables.css";
</style>
<!--Progress Bar Scripts-->
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function selectAll() {
if ($('#checkbox1').is(':checked')) {
alert("checked");
$('#checkbox1').prop('checked', false);
}
else {
alert("unchecked");
$('#checkbox1').prop('checked', true);
}
}
</script>
</head>
<div data-role="page" id="selectProducts" data-theme="b">
<div data-role="content">
<div data-role="fieldcontain">
<div style="width: auto; display: inline-block; vertical-align: middle; padding-top:1em">
<label for="subtotal" style=" display: inline-block; padding-right: 7em; font-weight: bold">Total:</label>
<label id="subtotal"></label>
</div>
<div style="width: 200px; display: inline-block; vertical-align: middle; float:right">
<!-- <a id="checkAll" href="javascript:selectAll()" data-role="button" style="width: 200px;">Remove Selection</a>-->
<input onclick="selectAll()" type="button" id="checkAll" value="Check All" />
<input type="hidden" id="isChkd" value="true" />
</div>
<label style="padding-bottom:8em"></label>
</div>
<label for="contactShow" style=" display: inline-block; padding-right: 5em; font-weight: bold">Contact: </label>
<label id="contactShow">Alex Turner</label><br />
<label for="contactIdShow" style=" display: inline-block; padding-right: 5em; font-weight: bold">Cus Ref: </label>
<label id="contactIdShow">12345</label><br />
<ul id="OrderList" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Order Details</li>
<li>
<a href="#" style="padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;">
<label style="border-top-width: 0px; margin-top: 0px; border-bottom-width: 0px; margin-bottom: 0px; border-left-width: 0px; border-right-width: 0px;" data-corners="false">
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkboxProd" id="checkboxProd2" data-theme="c" checked="checked" />
<label for="checkboxProd2" style="border-top-width: 0px; margin-top: 0px; border-bottom-width: 0px; margin-bottom: 0px; border-left-width: 0px; border-right-width: 0px;">
<h3>Black Denim</h3>
</label>
<table id="OrderDetailsTable2" border="0" style="background-color: transparent; border-color: transparent; color: transparent; width: 250px; font-size: small; padding: 0; padding-left: 3em;">
</table>
</fieldset>
</label>
</a>
</li>
</ul>
<div style="width: 200px; display: inline-block; vertical-align: middle; float:right">
<a href="#searchProducts" data-role="button" style="width: 200px;">Add To Order</a>
</div>
</div>
</div>
演示
试试这个
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function selectAll()
{
if ($('#checkboxProd2').is(':checked'))
{
alert("checked");
$('#checkboxProd2').prop('checked', false);
}
else
{
alert("unchecked");
$('#checkboxProd2').prop('checked', true);
}
}
</script>
</head>
希望这有帮助,谢谢
相关文章:
- 使用按钮和媒体查询切换显示状态
- 显示服务工作者状态的消息
- jQuery隐藏元素在使用CSS显示时保持隐藏状态
- 如何在状态输入ui路由器时立即显示模板,然后当承诺被解决时显示数据
- 在弹出窗口中显示状态
- 如何在 jquery 中的速率按钮下方显示消息状态
- 使用codehelper.io显示基于IP位置的状态缩写
- 这个预加载器工作吗?它不用于显示状态,只是加快了以后可能的图像加载速度
- 如何在ui路由器的父模板中显示状态
- 获取受 .slideToggle() 影响的显示状态元素
- 自动对焦属性在 Firefox 中因显示状态更改而不起作用
- 角度 SPA 未显示状态激活的 API 数据
- 如何在iOS UIAutomation中获取按钮突出显示状态
- Javascript图像预加载程序没有't显示状态
- 使用jQuery切换显示状态
- 如何启用窗口.在弹出窗口中显示状态
- 如何解决选择国家时动态显示状态的问题
- 这是在asp.net中显示状态消息的最佳方式
- 切换可见性-显示/隐藏-切换时保持显示状态
- 使用jQuery/Ajax/JS加载PHP文件和显示状态的正确或最佳过程