Question

我正在尝试将标准复选框更改为font-awsome版本。问题是我无法更改HTML，因为它生成了，我也不能使用jQuery。有没有办法在下面的html中找到我的复选框的标签并更改标签：在复选框之前是真还是假？

编辑：我想我可能有点不清楚，完整的代码包含一个javascript，使我无法使用javascript而不更改它。此外，labeltext的类是常用的，也可以是-1或-2。

<table cellpadding="0" cellspacing="0" class="odincategory odincategory38 odincategory-even odincategory-placement2 odincategory-placement-even odincategory-multi" id="odincategory38-holder">
  <tbody>
    <tr>
      <td class="odincategorycheckcolumn">
        <input type="checkbox" name="odinanswer1" value="38" class="odincategorycheckmulti" id="odincategory38">
      </td>
      <td class="odincategorylabelcolumn">
        <table cellpadding="0" cellspacing="0" id="odincategorylabel38">
          <tbody>
            <tr>
              <td class="odincategorylabel">
                <label for="odincategory38"><span class="odinfontnumber-0">Choice<br>
                  </span></label>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td class="odincategorymarkcolumn"></td>
    </tr>
  </tbody>
</table>

Answer 1

使用纯CSS无法做到这一点。问题是您只能选择相邻，跟随或降序元素。在您的情况下，标签位于文档树中的其他位置。如果您可以在复选框旁边放置标签，则可以执行类似

的操作

input[type=checkbox] + label {
  color: green;
} 
input[type=checkbox]:checked + label {
  color: red;
}

但这不适用于您的代码。

Answer 2

试试这个改变标签颜色的样本...... 以同样的方式，你可以改变你需要的东西。

在这个例子中，我使用了一个按钮，但你可以编写一个特殊的函数，在页面加载后改变字体

<table cellpadding="0" cellspacing="0" class="odincategory odincategory38 odincategory-even odincategory-placement2 odincategory-placement-even odincategory-multi" id="odincategory38-holder">
  <tbody>
    <tr>
      <td class="odincategorycheckcolumn">
        <input type="checkbox" name="odinanswer1" value="38" class="odincategorycheckmulti" id="odincategory38">
      </td>
      <td class="odincategorylabelcolumn">
        <table cellpadding="0" cellspacing="0" id="odincategorylabel38">
          <tbody>
            <tr>
              <td class="odincategorylabel">
                <label for="odincategory38" id="labelForodincategory38"><span class="odinfontnumber-0">Choice<br>
                  </span></label>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td class="odincategorymarkcolumn"></td>
    </tr>
  </tbody>
</table>

<input type="button" onclick="document.getElementById('labelForodincategory38').style.color='blue'" value="Click Me to Change Color" />

使用CSS查找复选框的标签

2 个答案: