使用按钮标签更改复选框的状态不再有效

Question

直到最近，以下代码段工作正常，复选框本身被CSS隐藏，并且单击该按钮可以更改复选框的状态，然后可以根据该复选框的状态表单提交，不过，最近（不知道什么时候）这个停止工作，现在该按钮的点击什么也不做：

<label for="someCheckBox" class="someCheckBox"> 
    <input type="checkbox" id="someCheckBox" name="someCheckBox" value="checkBox" /> 
    <button type="button" title="Some CheckBox">Some CheckBox</button> 
</label> 

CSS：

#someCol label.someCheckBox button { 
    background-color: black; 
    color: #C0C0C0; 
    height: 1.5em; 
    margin: 10px 4px 0 0; 
    border: 1px solid #C0C0C0; 
    -moz-border-radius: .75em; 
    -webkit-border-radius: .75em; 
    border-radius: .75em; 
    font-size: 1.0em; 
    font-family:"Final Frontier"; 
    font-weight: bold; 
    width: 40px; 
} 
#someCol label.someCheckBox button:hover { 
    background-color: #C0C0C0; 
    color: black; 
    border: 1px solid #606060; 
    cursor: pointer; 
    -moz-animation-duration: 3s; 
    -moz-animation-name: glow; 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-play-state: running; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-name: glow; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-play-state: running; 
    animation-duration: 3s; 
    animation-name: glow; 
    animation-iteration-count: infinite; 
    animation-play-state: running; 
} 
#someCol label.someCheckBox input { 
    position:absolute; 
    top:-20px; 
} 
#someCol label.someCheckBox input:checked + button { 
    background-color: #C0C0C0; 
    color: black; 
    border: 1px solid #606060; 
    box-shadow: 0 0 15px #C0C0C0; 
    -webkit-box-shadow: 0 0 15px #C0C0C0; 
} 
#someCol label.someCheckBox button { 
    width: 90px; 
    margin: 10px 0 0 4px; 
} 

应当指出的是，我简要地尝试更新其中一个按钮/复选框是文本标签而不是a按钮和复选框的状态确实发生了变化，但是，我希望按钮可以用于表单的外观，并且我有很多这些按钮，因此需要花费大量工作来更改它们...

同样，我最初喜欢这种方法，因为它减少了JS使得表单更加友好的需求，所以尽管我可以编写一个脚本来改变复选框的状态，但它并不符合我的基本目的，并且它也会当以前工作时，需要花费大量的工作来纠正以这种方式设置的所有按钮。

因为这确实工作过，我还没有触及代码库的某个时间，我不确定除了浏览器更新之外有什么改变，任何人都可以协助，因为我一直在撕掉我的头发几个小时，而且不能弄清楚什么改变了...

Answer 1

没有得到答案，所以去了最简单的选择是添加一个JS onClick事件。这不是我怎么想它的工作，但是是最快的解决方案：

<label for="someCheckBox" class="someCheckBox"> 
    <input type="checkbox" id="someCheckBox" name="someCheckBox" value="checkBox" /> 
    <button type="button" title="Some CheckBox" onclick="changeStateButton(\'someCheckBox\',\'check\');">Some CheckBox</button> 
</label> 

function changeStateButton(selID,selType){ 
    if (document.getElementById(selID) !== null && document.getElementById(selID) !== "undefined"){ 
     if (selType="check"){ 
      if (!document.getElementById(selID).checked) { 
       document.getElementById(selID).checked = "checked"; 
      } else { 
       document.getElementById(selID).checked = ""; 
      } 
     } else if (selType="radio"){ 
      if (!document.getElementById(selID).checked) { 
       document.getElementById(selID).checked = "checked"; 
      } 
     } 
    } 
} 

如果任何人都可以回答为什么它停止工作的纯HTML的方式我还是有兴趣知道。

Answer 2

呈现的解决方案似乎过于复杂和冗长。我倾向于利用这样一个事实，即有关的元素都是UI元素，因此，响应鼠标事件。

我也会考虑让代码更加智能化，以便它不需要内联JS将按钮附加到其目标输入元素。也许通过一个拥有目标id的属性，或者更好 - 你可以得到被点击的按钮（标签）的父对象，然后获取它所包含的（唯一的）输入元素并对其执行操作。

去了解它，我介绍的第一种方式，你可以调用目标元素的click()功能，可以用它在3线来完成，像这样：

function myChange(tgtId) 
{ 
    var tgtElem = byId(tgtId); 
    if (tgtElem != undefined) 
     tgtElem.click(); 
} 

此功能下降 - 代替已有的代码，并且使您的html整理器更容易出错，并且不需要传递第二个变量。虽然它仍然需要通过内联javascript连接。

也许一个更好的解决方案是编写一个处理程序，通过它可以确定按钮与哪个元素配对，这是因为它们是同一父级的唯一兄弟。这也意味着你可以在一个非常小的循环中设置它们的任意数量，再次保持你的html更清晰。

首先，执行检查/取消选中的功能。

function myChange2(evt) 
{ 
    var clickedButton = this; 
    var containingLabel = clickedButton.parentNode; 
    var tgtElem = containingLabel.getElementsByTagName('input')[0]; 
    if (tgtElem != undefined) 
     tgtElem.click(); 
} 

我们找出哪些因素导致调用该函数，得到它的母公司，然后得到它包含的按钮列表中的第一个元素（应该只有一个，但该函数返回一个列表，一个NodeList是特定的）。然后，我们只需单击该元素，即可让浏览器处理状态更改。

最后，我们需要一种将函数连接到所有需要它的元素的方法。我们将使用querySelectorAll，因为它允许我们使用css选择器，这大大简化了获取我们实际感兴趣的元素列表的过程。我使用>字符来表示元素需要成为标签的直接子代 - 它不会定位包含在标签中包含的另一个元素中的按钮。 （您可以在我添加的第一个复选框中看到此效果，方法是将一个按钮放在标签内的一个范围中。）然后，我们将附加该事件，从而使我们可以访问处理函数中的this关键字，它允许代码知道哪个按钮导致它被调用。

下面是一个完整的示例 - 我已经更改了标签的类，以便将事件附加到我添加的事件不会干扰已存在的事件。我还删除了每个按钮的type='button'属性 - 如果您使用输入（类型按钮），则只需要此属性。我还从复选框中删除了value属性，因为它被选中或未选中 - 浏览器会为我们处理此问题。单选按钮需要它，但复选框不需要。

关于我在评论部分关于转义'字符的评论 - 您可以用双引号将单引号括起来，或者反过来。您只需在引用相同类型的引号时避开引号。

所以，没有用斜线转义 - '"'没问题，因为是"'"。 你只需要它的'''或"""，这将成为每一个和'\''"\""

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function byId(id){ return document.getElementById(id); } 
window.addEventListener('load', onDocLoaded, false); 

function onDocLoaded(evt) 
{ 
    var elemsToInit = document.querySelectorAll('label.btnProxy > button'); 
    var i, n = elemsToInit.length; 
    for (i=0;i<n;i++) 
    { 
     elemsToInit[i].addEventListener('click', myChange2, false); 
    } 
} 

function myChange(tgtId, tgtType) 
{ 
    var tgtElem = byId(tgtId); 
    if (tgtElem != undefined) 
     tgtElem.click(); 
} 

function myChange2(evt) 
{ 
    var clickedButton = this; 
    var containingLabel = clickedButton.parentNode; 
    var tgtElem = containingLabel.getElementsByTagName('input')[0]; 
    if (tgtElem != undefined) 
     tgtElem.click(); 
} 

</script> 
</head> 
<body> 
    <label for="someCheckBox" class="someCheckBox"> 
     <input type="checkbox" id="someCheckBox" name="someCheckBox" value="checkBox" /> 
     <button type="button" title="Some CheckBox" onclick="myChange('someCheckBox','check');">Some CheckBox</button> 
    </label> 

    <hr> 

    <label class="btnProxy"><input type="checkbox"/><button>Toggle</button><span><button>I'm Inert!</button></span></label> 
    <br> 
    <label class="btnProxy"><input type="checkbox"/><button>Toggle</button><button>I work too!</button></label> 
    <br> 
    <label class="btnProxy"><input type="checkbox"/><button>Toggle</button></label> 

    <hr> 

    <label class="btnProxy"><input type="radio" name='gender' value='alien'/><button>Select</button></label> 
    <br> 
    <label class="btnProxy"><input type="radio" name='gender' value='female'/><button>Select</button></label> 
    <br> 
    <label class="btnProxy"><input type="radio" name='gender' value='male'/><button>Select</button></label> 

</body> 
</html>