我有一个包含多个元素的表。第一个元素是一个复选框,它将在Javascript中触发事件。我需要做的是: 1.检查复选框值是否为true 2.如果为true,则从表元素中获取值 一个。一些列值是文本 湾一些列包含文本框(
<table class="rowClick" id="page" width="100%">
<thead>
<tr id="p_1">
<th colspan=9 align=center >Select/Change and Update Selections</th>
</tr>
<tr id="p_2">
<th>Select</th>
<th class="table-sortable:default">Class</th>
<th class="table-sortable:default">Desc</th>
<th class="table-sortable:default">Weight</th>
<th class="table-sortable:currency">Pott Dia</th>
<th class="table-sortable:currency">Pott Ht</th>
<th class="table-sortable:currency">Pott Stack Ht</th>
<th class="table-sortable:currency">Tower Width</th>
</tr>
</thead>
<tbody>
<tr id="p_3">
<td align=center>
<input class = "prodSel" type="checkbox" id="chk[]"></td>
<td align=center>00100</td>
<td align=center>C100</td>
<td align=center>XL</td>
<td align=center><input size=5 type="text" value=4.75></td>
<td align=center><input size=5 type="text" value=4.68></td>
<td align=center><input size=5 type="text" value=0.33></td>
<td align=center><input size=5 type="text" value=40.40></td>
</tr>
<tr id="p_4">
<td align=center><input class = "prodSel" type="checkbox" id="chk[]"></td>
<td align=center>00140</td>
<td align=center>C200S</td>
<td align=center>CL</td>
<td align=center><input size=5 type="text" value=6.00></td>
<td align=center><input size=5 type="text" value=5.43></td>
<td align=center><input size=5 type="text" value=0.43></td>
<td align=center><input size=5 type="text" value=42.00></td>
</tr>
<tr id="p_5">
<td align=center><input class = "prodSel" type="checkbox" id="chk[]"></td>
<td align=center>00140</td>
<td align=center>C200S</td>
<td align=center>CU</td>
<td align=center><input size=5 type="text" value=6.00></td>
<td align=center><input size=5 type="text" value=5.43></td>
<td align=center><input size=5 type="text" value=0.43></td>
<td align=center><input size=5 type="text" value=42.00></td>
</tr>
</tbody>
</table>
目前,我有以下内容:
rowSelect: function(event) {
var work = [];
// var rowIndex = $(this).parent().parent().children().index($(this).parent());
var chkbox = $(this).closest('tr').find('td:eq(0)').child(0);
if(null != chkbox && true == chkbox.checked){
for(var i=0;i<17;i++){
if(i<3){
var s = $(this).closest('tr').find('td:eq(i)').text();
}
else{
var s = $(this).closest('tr').find('td:eq(i)').val();
}
work[i]=s;
}
}
}
问题是在我开始尝试获取复选框的值(已选中或未选中)时。我以为我可以抓住对象,然后检查val(),或者只是从孩子那里得到val(),但还没有任何工作。我需要的是一种获取复选框值的方法,并从文本输入框中获取值。
我在解决方案方面有一个小提琴:http://jsfiddle.net/radi8/tCh3P/19/
----&GT;解决方案&lt; ----
好的,这是我的最终解决方案,使用下面提供的功能以及其他任何关心的外观。我将其更改为填充JSON而不是使用数组,但整体功能有效。
var proddta =
{
init: function(){
// hook into the get delete/update buttons
var del = $("#delete");
for (var i = 0, ii = del.length; i < ii; i++){
$(del).bind("click", proddta.deleteListener2);
}
var upd = $("#update");
for (var i = 0, ii = upd.length; i < ii; i++){
$(upd).bind("click", proddta.updateListener);
}
},
updateListener: function(event){
myJSON = new Object();
$('.prodSel:checked').each(function() {
proddta.getArrays(this, myJSON);
var dataString = JSON.stringify(myJSON);
alert('dastring: '+dataString);
/*
var url = 'http://'+window.location.hostname+'/truck/webServices/products.svc.php?update=1';
$.post(url, {data: dataString}, function(res){
proddta.showResult(res);
});
*/
});
},
deleteListener2: function(event){
myJSON = new Object();
$('.prodSel:checked').each(function(){
proddta.getArrays(this, myJSON);
var dataString = JSON.stringify(myJSON);
/*
var url = 'http://'+window.location.hostname+'/truck/webServices/products.svc.php?update=0';
$.post(url, {data: dataString}, function(res){
var obj = $.evalJSON(res);
if(obj.somebool === true)
$("#result").html(obj.hello + ' ' + obj.array[1] + obj.worked + ". Message from PHP: "+obj.php_message);
});
*/
alert('dastring: '+dataString);
});
},
getArrays: function(evt, myjson){
var val = proddta.getColumnCount(this);
$closestTr = $(evt).closest('tr');
var chkbox = $closestTr.find('td:eq(0)').find(':checkbox');
if (null !== chkbox && true === chkbox.is(':checked')) {
var s = '';
var id = '';
for (var i = 1; i < val; i++) {
if (i >= 1 && i < 4) {
s = $closestTr.find('td:eq(' + i + ')').text();
id = $closestTr.find('td:eq(' + i + ')').attr('id');
} else {
s = $closestTr.find('td:eq(' + i + ')').find(':input').val();
id = $closestTr.find('td:eq(' + i + ')').find(':input').attr('id');
}
myjson[id] = s;
}
}
else {
// handle this exception...
}
},
getColumnCount: function(evt){
var colCount = 0;
$('tr:nth-child(1) td').each(function () {
if ($(this).attr('colspan')) {
colCount += +$(this).attr('colspan');
} else {
colCount++;
}
});
alert(colCount);
return colCount;
},
}
proddta.init();
答案 0 :(得分:2)
要找到复选框:
var checkbox = $(this).closest().find('input:checkbox:first');
if (checkbox.is(':checked')){
// checkbox is checked
}
参考文献:
答案 1 :(得分:2)
您的代码需要一堆修复,最后才有效。见下文,
rowSelect: function(event) {
alert('hello 1');
var work = [];
var $closestTr = $(this).closest('tr');
var chkbox = $closestTr.find('td:eq(0)').find(':checkbox');
alert('hello 2 ' + chkbox.is(':checked'));
if (null !== chkbox && true === chkbox.is(':checked')) {
alert('hello 3');
var s = '';
for (var i = 0; i < 17; i++) {
if (i != 0 && i < 4) {
s = $closestTr.find('td:eq(' + i + ')').text();
} else {
s = $closestTr.find('td:eq(' + i + ')').find(':input').val();
}
work.push(s);
}
}
else {
alert('hello 99');
}
alert('hello 4 ' + work.join(' '));
}
答案 2 :(得分:1)
将chkbox
变量声明更改为:
var chkbox = $(this).parents('tr').find('input[type=checkbox]').get(0);