Fatal编程技术网

Javascript 原型选择帮助

javascript

Javascript 原型选择帮助,javascript,prototypejs,css-selectors,Javascript,Prototypejs,Css Selectors,嘿，伙计们，我正在尝试为我使用的web应用程序添加一个小功能。现在，我正在尝试选中页面上所有的复选框，其中包含class。checkBox（以防需要区分/选择）。复选框是类的div的后代。someClass，只是有许多div具有该类。我想选中这些框，它们是类仅为.someClass的div的后代 换言之： <!-- Check this box --> <div class="someClass"> [...] <input type="checkbox" clas

嘿，伙计们，我正在尝试为我使用的web应用程序添加一个小功能。现在，我正在尝试选中页面上所有的复选框，其中包含class
。checkBox
（以防需要区分/选择）。复选框是类
的div的后代。someClass
，只是有许多div具有该类。我想选中这些框，它们是类仅为
.someClass
的div的后代

换言之：

<!-- Check this box -->
<div class="someClass"> [...] <input type="checkbox" class="checkBox" /></div>

<!-- But not this one -->
<div class="someClass otherClasses lolWut"> [...] <input type="checkbox" class="checkBox" /></div>


[...] 
[...]
请记住，复选框不是直接的子项，而是子项

谢谢，我将非常感谢您的帮助：）

给您：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Check the boxes</title>
    <script src="prototype.js" type="text/javascript"></script>

    <script type="text/javascript">
    function checkThem() {
      // get all the .someClass divs
      $$(".someClass").each(function(item) {
        // filter out the ones that have additional classes 
        if(item.className == 'someClass') {
          // get the .checkBox descendants
          item.select('.checkBox').each(function(checkbox) {
            // check them
            checkbox.checked = true;
          });
        }
      });   
    }
    </script>

</head>

<body>

  <!-- Check this box -->
  <div class="someClass">Check: <input type="checkbox" class="checkBox" /><input type="checkbox" class="checkBox" /></div>

  <!-- But not this one -->
  <div class="someClass otherClasses lolWut">Don't check: <input type="checkbox" class="checkBox" /></div>

  <!-- Check this box -->
  <div class="someClass">Check: <input type="checkbox" class="checkBox" /><input type="checkbox" class="checkBox" /></div>

  <br /><br />

  <a href="#" onclick="checkThem(); return false;">Check them.</a>

</body>
</html>


勾选方框
函数checkThem（）{
//得到所有的。一些班级的div
$$（“.someClass”）。每个（函数（项）{
//筛选出具有附加类的类
如果（item.className=='someClass'）{
//获取.checkBox子体
项目。选择（'.checkBox'）。每个（功能）（复选框）{
//检查一下
checkbox.checked=true；
});
}
});   
}
检查：
不要检查：
检查：
给你：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Check the boxes</title>
    <script src="prototype.js" type="text/javascript"></script>

    <script type="text/javascript">
    function checkThem() {
      // get all the .someClass divs
      $$(".someClass").each(function(item) {
        // filter out the ones that have additional classes 
        if(item.className == 'someClass') {
          // get the .checkBox descendants
          item.select('.checkBox').each(function(checkbox) {
            // check them
            checkbox.checked = true;
          });
        }
      });   
    }
    </script>

</head>

<body>

  <!-- Check this box -->
  <div class="someClass">Check: <input type="checkbox" class="checkBox" /><input type="checkbox" class="checkBox" /></div>

  <!-- But not this one -->
  <div class="someClass otherClasses lolWut">Don't check: <input type="checkbox" class="checkBox" /></div>

  <!-- Check this box -->
  <div class="someClass">Check: <input type="checkbox" class="checkBox" /><input type="checkbox" class="checkBox" /></div>

  <br /><br />

  <a href="#" onclick="checkThem(); return false;">Check them.</a>

</body>
</html>


勾选方框
函数checkThem（）{
//得到所有的。一些班级的div
$$（“.someClass”）。每个（函数（项）{
//筛选出具有附加类的类
如果（item.className=='someClass'）{
//获取.checkBox子体
项目。选择（'.checkBox'）。每个（功能）（复选框）{
//检查一下
checkbox.checked=true；
});
}
});   
}
检查：
不要检查：
检查：
我在一个单独的html文件中测试了您的代码，它成功了！然而，我在我正在使用的项目中使用它时遇到了困难。我一直在Firebug“指定了无效或非法的字符串”代码中遇到错误：“12”后跟“results=$A（root.queryselectoral（e））.map（Element.extend）；\n”，并且什么也没有发生（没有选中任何框）。复选框是后代，而不是直接子代，这是为什么？我使用的是prototype.js 1.6.1，它们是否是后代并不重要（我通过将复选框嵌套在其他一些元素中进行测试）。我还使用prototype.js 1.6.1进行了测试。问题中的实际类名是什么？由于这些是唯一的字符串，这可能是问题的根源（例如，如果它们是无效的类名）。我已经将prototype升级到prototype 1.6.1（只是js文件），出于某种原因，我刚刚想我应该恢复，看看这是否能解决问题，它确实解决了。也许这个web应用程序正在缓存一些东西，我不知道。我现在运行的是1.6.0.2，但至少它可以工作。稍后我将尝试找出它为什么不能与1.6.1配合使用。同时，感谢您的解决方案，它工作得非常好。我在一个单独的html文件中测试了您的代码，它工作得很好！然而，我在我正在使用的项目中使用它时遇到了困难。我一直在Firebug“指定了无效或非法的字符串”代码中遇到错误：“12”后跟“results=$A（root.queryselectoral（e））.map（Element.extend）；\n”，并且什么也没有发生（没有选中任何框）。复选框是后代，而不是直接子代，这是为什么？我使用的是prototype.js 1.6.1，它们是否是后代并不重要（我通过将复选框嵌套在其他一些元素中进行测试）。我还使用prototype.js 1.6.1进行了测试。问题中的实际类名是什么？由于这些是唯一的字符串，这可能是问题的根源（例如，如果它们是无效的类名）。我已经将prototype升级到prototype 1.6.1（只是js文件），出于某种原因，我刚刚想我应该恢复，看看这是否能解决问题，它确实解决了。也许这个web应用程序正在缓存一些东西，我不知道。我现在运行的是1.6.0.2，但至少它可以工作。稍后我将尝试找出它为什么不能与1.6.1配合使用。同时，感谢您的解决方案，效果非常好。