您好我有以下代码。这只适用于一行。我希望这应该适用于所有行和＆amp;如果我选中顶部复选框，则应选中所有复选框以显示表格中的所有项目。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Quotation New Design</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" >
function valueChanged()
{
if($(".checkezspeedkit").is(":checked"))
$(".qtyezspeedkit ").show();
else
$(".qtyezspeedkit").hide();
}
</script>
<style type="text/css">
.qtyezspeedkit {
display:none;
}
.optionezspeedkit{
display:none;
}
.qtyezspeedkitbluetooth{
display:none;
}
.optionezspeedkitbluetooth{
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Checkbox Test</h4>
<div class="table-responsive">
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th><input type="checkbox" id="checkall" /></th>
<th>Name</th>
<th>Qty</th>
<th>Option</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkezspeedkit" name="chkezspeedkit" onchange="valueChanged()"/></td>
<td>EZSpeed Kit</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezspeedkit" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="qtyezspeedkit">
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkezspeedkitbluetooth" name="chkezspeedkitbluetooth" onchange="valueChanged()"/></td>
<td>EZSpeed Kit - Bluetooth</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" >
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkezspeedkitwifi" name="chkezspeedkitbluetooth" onchange="valueChanged()"/></td>
<td>EZSpeed Kit - Wi-Fi</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" >
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkezenergykit" name="chkezspeedkitbluetooth" onchange="valueChanged()"/></td>
<td>EZEnergy Kit</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" >
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkezenergykitbluetooth" name="chkezspeedkitbluetooth" onchange="valueChanged()"/></td>
<td>EZEnergy Kit - Bluetooth</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" >
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkezenergykitwifi" name="chkezspeedkitbluetooth" onchange="valueChanged()"/></td>
<td>EZEnergy Kit - Wi-Fi</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" >
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
答案 0 :(得分：1)
此功能使用“checkboxitem”类检查所有项目。 如果val为true，则jquery会在所有带有类的复选框上将attr“checked”设置为true，如果“val”为false，则设置为false。
function check_all(val){
if(val){
$(".checkboxitem").attr("checked", true);
}else{
$(".checkboxitem").attr("checked", false);
}
}
此外，如果您希望它更通用，您可以这样做：
function check_all(val,class_to_check = "checkboxitem"){
if(val){
$("."+class_to_check).attr("checked", true);
}else{
$("."+class_to_check).attr("checked", false);
}
}
如果设置为“class_to_check”，则为空。 抱歉英文不好。
答案 1 :(得分：0)
您可以通过为每个复选框指定一个特殊类来轻松完成此操作。在我的情况下，我分配了＆＃34; checkboxitem＆＃34;。然后我创建了一些JavaScript代码，它使用jQuery来分配每个已分配类的元素的checked属性。
参见工作示例：https://jsfiddle.net/t7tpzoku/
HTML：
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Checkbox Test</h4>
<div class="table-responsive">
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th><input type="checkbox" id="checkall" /></th>
<th>Name</th>
<th>Qty</th>
<th>Option</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkezspeedkit checkboxitem" name="chkezspeedkit" /></td>
<td>EZSpeed Kit</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezspeedkit" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="qtyezspeedkit">
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkezspeedkitbluetooth checkboxitem" name="chkezspeedkitbluetooth" /></td>
<td>EZSpeed Kit - Bluetooth</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezspeedkitbluetooth" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="optionezspeedkitbluetooth" >
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkezspeedkitwifi checkboxitem" name="chkezspeedkitbluetooth" /></td>
<td>EZSpeed Kit - Wi-Fi</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezspeedkitwifi" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="optionezspeedkitwifi" >
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkezenergykit checkboxitem" name="chkezspeedkitbluetooth" /></td>
<td>EZEnergy Kit</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezenergykit" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="optionezenergykit" >
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkezenergykitbluetooth checkboxitem" name="chkezspeedkitbluetooth" /></td>
<td>EZEnergy Kit - Bluetooth</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezenergykitbluetooth" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="optionezenergykitbluetooth" >
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" class="checkezenergykitwifi checkboxitem" name="chkezspeedkitbluetooth" /></td>
<td>EZEnergy Kit - Wi-Fi</td>
<td>
<select name="Select1" style="width: 50px" class="qtyezenergykitwifi" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</td>
<td>
<select name="Select2" style="width: 137px" class="optionezenergykitwifi" >
<option>Please select</option>
<option>Required</option>
<option>Option</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
JavaScript的：
$(function()
{
$("#checkall").on("click", function()
{
$(".checkboxitem").prop("checked", $("#checkall").prop("checked"));
$( ".checkboxitem" ).trigger( "change" );
});
$(".checkboxitem").on("change", function()
{
var className1 = "." + $(this).attr("class").split(" ")[0].replace("check", "qty");
var className2 = "." + $(this).attr("class").split(" ")[0].replace("check", "option");
if($(this).is(":checked"))
{
$(className1).show();
$(className2).show();
}
else
{
$(className1).hide();
$(className2).hide();
}
});
});