Javascript 基于某些DIV内容更改CSS

希望有人能在jquery或javascript方面帮助我。我有一些DIV，其中包含复选框的值为1或0，具体取决于我是否选中该复选框：

<div class="checkbox">1</div>   //This is when the checkbox is checked

<div class="checkbox">0</div>   //This is when the checkbox is NOT checked

这个DIV的类保持不变，无论它是0还是1，所以我需要一个条件语句

如果DIV的内容为1，则显示它

及

如果DIV的内容为0，则将其隐藏

---

这样做简单吗？

在这种情况下，过滤器会派上用场

$('.checkbox').filter(function () {
   return $(this).text() == 0;
}).hide();

---

在这种情况下，过滤器会派上用场

$('.checkbox').filter(function () {
   return $(this).text() == 0;
}).hide();

---

我会换一种方式

$("input#checkbox").change(function(){
  $("div.checkbox").toggle(this.checked);
});

---

考虑到您的复选框正在以任何方式更改内容。

我会以不同的方式进行操作

$("input#checkbox").change(function(){
  $("div.checkbox").toggle(this.checked);
});

---

考虑到您的复选框正在以任何方式更改内容。

每当复选框更改时，请使用类复选框查看您的div，如果它们有1，则显示，否则隐藏

$('input[type="checkbox"]').on('change', function() {
    $('.checkbox').each(function(){
        if($(this).text() === '1'){
            $(this).show();
        }else{
            $(this).hide();
        }
    });
});

---

每当复选框被更改时，使用类复选框查看div，如果它们有1，则显示，否则隐藏

$('input[type="checkbox"]').on('change', function() {
    $('.checkbox').each(function(){
        if($(this).text() === '1'){
            $(this).show();
        }else{
            $(this).hide();
        }
    });
});

可以使用根据div的内容选择div

$('div.checkbox:contains("1")').show();
$('div.checkbox:contains("0")').hide();

可以使用根据div的内容选择div

$('div.checkbox:contains("1")').show();
$('div.checkbox:contains("0")').hide();

---

如果我必须这样做，那么我愿意这样做：

---

如果我必须这样做，那么我愿意这样做：

---

---

我想他想用文本内容1显示div.checkbox，用文本内容0隐藏div.checkbox在这方面我同意你的答案，你比我快，但我想他想用文本内容1显示div.checkbox，用文本内容0隐藏div.checkbox在这方面我同意你的答案，你比我快如果在这个过滤器运行后它发生了变化呢？把它放在一个变化监听器中，就像我的答案一样。我会把我的答案和织女星的答案结合起来，尽管他的答案值得我的回答Answer@idrumgood不同意除非触发事件，否则您的不会运行。非常感谢各位，我注意到0在脚本运行之前短暂出现，然后消失。有没有办法阻止这一切？我把脚本放在页面的底部…它放在顶部时不起作用。如果你需要它在页面加载时运行，并且当复选框更改时，那么你需要将此筛选代码放入函数中，然后在页面加载和更改侦听器上调用该函数。如果在运行此筛选器后它发生更改，将其放入更改侦听器中（如我的答案所示），该怎么办。我会把我的答案和织女星的答案结合起来，尽管他的答案值得我的回答Answer@idrumgood不同意除非触发事件，否则您的不会运行。非常感谢各位，我注意到0在脚本运行之前短暂出现，然后消失。有没有办法阻止这一切？我把脚本放在页面底部…它放在顶部时不起作用。如果你需要它在页面加载时运行，并且复选框发生变化，那么你需要将此筛选代码放入函数中，然后在页面加载和更改侦听器上调用该函数。最好给每个元素赋予另一个类，例如，检查其中一个和未检查另一个时。必须在DOM中查看内容是混乱和缓慢的，尽管性能在这里可能不是一个真正的问题。最好为每个元素提供另一个类，比如检查一个元素时，以及未检查另一个元素时。必须在DOM中查看内容是混乱和缓慢的，尽管性能可能不会是一个真正的问题。使用Contains时应格外小心，以防止误报贪婪，但是Dan指定内容仅为1或0，因此您将很难获得误报。应极其小心地使用Contains以防止误报贪婪，但Dan指定内容仅为1或0，因此您将很难获得误报。虽然我的有效，@Vega的答案更清晰，每个函数的作用都与我的相同。当我的函数工作时，@Vega的答案更清晰，每个函数的作用都与我的相同。