Javascript 控件元素显示为复选框

我想显示在我的复选框中签入的特定行的内容

HTML:

全部
一个
两个
三
1.
一
2.
二
3.
三

JS:

如果（$（'.one'）。是（“：选中”））{
$（“输入：复选框”）.text（）；
//检查过了
}
如果（$（'.two'）。是（“：选中”））{
$（“输入：复选框”）.text（）；
//检查过了
}
如果（$（'.three'）。为（“：选中”））{
$（“输入：复选框”）.text（）；
//检查过了
}

---

我希望得到该行的数据，只有在选中该行时，默认情况下，该行才会显示所有值。

首先，您希望捕获所有复选框单击。使用

$（'input[type=checkbox'）。单击（）

捕获这些单击事件

然后，您要确定单击了哪个复选框。如果复选框为“全部”，则您要执行一组测试，如果其他复选框之一，则您要执行其他测试

演示：

$（'input[type=checkbox'）。单击（function（）{
//获取id，在下划线上排列，获取第二个arr元素，例如2
设nom=this.id.split（“”“）[1]；
如果（nom=='all'）{
如果（$（this）.is（':checked'））{
取消选中所有复选框（）；
显示所有表格行（）；
}否则{
警报（'现在，您完成使其隐藏所有行'）；
}
}否则{
$（'cb#u all'）.prop（'checked'，false）；
验证所有复选框（）；
}
});
函数验证所有复选框（）{
$（'input[type=checkbox'）。每个（函数（idx，el）{
var nom=此.id.split（“"”）[1]；
如果（！$（el）.is（“：选中”））{
控制台日志（nom）；
$（'table'）.find（'tr.+nom.）.addClass（'hidden'）；
}否则{
$（'table'）.find（'tr.+nom.）.removeClass（'hidden'）；
}
});
}
函数取消选中所有复选框（）{
$（'input[type=checkbox'）。每个（函数（idx，el）{
var nom=此.id.split（“"”）[1]；
如果（nom！=“全部”）{
$（this.prop（'checked'，false）；
}
});
}
函数show_all_table_rows（）{
$（'table tr'）.removeClass（'hidden'）；
}

.hidden{display:none；}

全部的
一个
两个
三
1.
一
2.
二
3.
三

我只想

.addClass（）

和

.removeClass（）

隐藏

类


/
*{
框大小：边框框；填充：0；边距：0；
}
html，正文{
宽度：100%；高度：100%；
}
身体{
背景：#ccc；
}
#内容{
填充：7px；
}
.隐藏{
显示：无；
}
标签{
显示：内联块；左边距：3px；
}

测试模板
全部的
一个
两个
三
1一
2two
三
您应该将“全部”复选框上的操作与其他复选框组分开处理

此外，如果“全部”被实际选中，那么取消选中所有其他复选框也是没有意义的。所有都是全部。所以，选中所有

不要使用类，选择器有一天可能会变得笨拙或不正确，而是使用
data-*
属性：


const$tog=$（'.tog'），
$all=$tog.filter（'[value=“all”]'），
$num=$tog.not（'[value=“all”]'），
$row=$（“[数据行]”）；
函数rowtogler（）{
const val=this.value；
如果（val=='all'）{
$num.prop（'checked'，this.checked）；//句柄组
$row.toggleClass（'none'，！this.checked）；//和所有行
}否则{
$all.prop（'checked'，$num.filter（':checked'）。长度===$num.length）；//处理所有
$row.filter（（i，el）=>$（el.data（'row'）==val.toggleClass（'none'，！this.checked）；//和特定行
}
}
$tog.on（'change'，rowtogler）；
rowtogler.call（$all[0]）；//Dry init
。无{
显示：无；
}
全部
一个
两个
三
1.
一
2.
二
3.
三
1）您没有带有
id=“one”
.2）
input type=“checkbox”的元素
没有
text
属性。它不起作用。我这样做了。我不知道它在这里是否可以正常工作，但如果我复制粘贴并尝试从我的pc上运行它，它根本就不起作用。@anusha注意到HTML中有变化too@AnushaNeupane不确定是否理解您的问题。控制台中有错误吗？什么API？
<input type="checkbox" checked>All
<input type="checkbox">One
<input type="checkbox">Two
<input type="checkbox">Three
<table border="2">
<tr class="one">
<td>1 </td>
<td>one</td>
</tr>
<tr class="two">
<td>2</td>
<td>two</td>
</tr>
<tr class="three">
<td>3
</td>
<td>three</td>
</tr>
</table>

<script>
if ($('.one').is(":checked")) {
        $("input:checkbox").text();
  // it is checked
}

if ($('.two').is(":checked")) {
        $("input:checkbox").text();
  // it is checked
}

if ($('.three').is(":checked")) {
        $("input:checkbox").text();
  // it is checked
}
</script>