Question

我是jquery的新手，并试图取得成就。我的HTML看起来像：

<li>
  <div class="yes"><input type="radio" name="Group 1"></div>
  <div class="no"><input type="radio" name="Group 1"></div>
  Group 1  
  <ul>
    <li style="padding-left:25px">
      <div class="yes"><input type="radio" name="Item 1"></div>
      <div class="no"><input type="radio" name="Item 1"></div>
      Item 1
    </li>
    <li style="padding-left:25px">
      <div class="yes"><input type="radio" name="Item 2"></div>
      <div class="no"><input type="radio" name="Item 2"></div>
      Item 2
    </li>
  </ul>
</li>
<li>
  <div class="yes"><input type="radio" name="Group 2"></div>
  <div class="no"><input type="radio" name="Group 2"></div>
  Group 2  
  <ul>
    <li style="padding-left:25px">
      <div class="yes"><input type="radio" name="Item 3"></div>
      <div class="no"><input type="radio" name="Item 3"></div>
      Item 3
    </li>
    <li style="padding-left:25px">
      <div class="yes"><input type="radio" name="Item 4"></div>
      <div class="no"><input type="radio" name="Item 4"></div>
      Item 4
    </li>
  </ul>
</li>

需要一段时间才能使html正确（我需要在单选按钮周围显示div），现在我正在进行JQuery处理。首先，我需要将对组1的更改传播到其所有“子”项。我不确定如何使用jquery完成它（我们使用1.1.3.1）。

任何提示？

更新：我按照建议编辑了HTML，封锁了这些组。

Answer 1

编辑：更改了一些代码，该死的旧jquery。

首先，您的无线电没有值。这将是你的美中不足，因为它们都是一样的。

对于你的HTML，我会这样做：

<li class="group" id="group1">
    <div class="yes"><input type="radio" name="group1" value="yes"></div>
    <div class="no"><input type="radio" name="group1" value="no"></div>
    Group 1  
    <ul>
        <li>
        <div class="yes"><input type="radio" name="Item1" value="yes"></div>
        <div class="no"><input type="radio" name="Item1" value="no"></div>
        Item 1
        </li>

        <li style="padding-left:25px">
        <div class="yes"><input type="radio" name="Item2" value="yes"></div>
        <div class="no"><input type="radio" name="Item2" value="no"></div>
        Item 2
        </li>
    </ul>
</li>

extra提供了以逻辑方式分隔子组的双重功能，并提供了一个很好的钩子。不要将填充设置为样式，而是使用{padding-left：25px;}

然后，你可以做

        $(document).ready(function(){
            $(".group>div>input").change(function(){
                val = $(".group>div>input:checked").val();
                var inputs = $(this).parents("li").find("ul li div input[@value="+val+"]");
                inputs.each(function(){$(this).attr("checked","checked")});
            });
        });

这将触发组1输入之一的内部功能。

Answer 2

$（“div”）=＆gt;选择所有div元素 $（“。yes”）=＆gt;选择类名为“yes”的所有元素 $（“＃elementId”）=＆gt;选择Id值为“elementId”的元素

$("div .yes") =>Selects elements under div element (all the descendants) and have class name "yes"

$("div > .yes") =>Selects elements right under div elements. Not all descendants, just direct children

希望它有所帮助。

例如$("li div[class=yes] input")将选择：

<div class="yes"><input type="radio" name="Group 1"></div>
<div class="yes"><input type="radio" name="Item 1"></div>
<div class="yes"><input type="radio" name="Item 2"></div>
<div class="yes"><input type="radio" name="Group 2"></div>
<div class="yes"><input type="radio" name="Group 5"></div>
<div class="yes"><input type="radio" name="Item 3"></div>
<div class="yes"><input type="radio" name="Item 4"></div>

有关更多信息，您可以查看jQuery选择器：http://docs.jquery.com/Selectors

或者最好的书是jQuery in Action，我正在从这本书中学到：）

选择li的同级元素：$("li")

Ps：在正常的javascript中，$（）表示getElementById()但它在jQuery中有点不同，因为jQuery的功能来自它的选择器，它使用Css选择器以及它自己的自定义和强大的选择器。

Answer 3

我看到标记使您难以选择“子”元素的问题是，这些项目与组项目位于同一层级。

在视觉上，您可以通过给孩子填充来区分父（组）和子（Item）。有没有理由说他们处于同一水平？

为了保持你的标记语义，并且更容易做你想做的事情，我建议改变你的结构：

<li>
    <div class="yes"><input type="radio" name="Group 1"></div>
    <div class="no"><input type="radio" name="Group 1"></div>
    Group 1
    <ul>
        <li style="padding-left:25px">
            <div class="yes"><input type="radio" name="Item 1"></div>
            <div class="no"><input type="radio" name="Item 1"></div>
            Item 1
        </li>
        <li style="padding-left:25px">
            <div class="yes"><input type="radio" name="Item 2"></div>
            <div class="no"><input type="radio" name="Item 2"></div>
            Item 2
        </li>
    </ul>  
</li>

Answer 4

为您的第1组儿童提供一个名为“group1”的类别，或者将其与其他组中的其他项目区别开来。或者在group1项目周围放置一个容器，如a或。

然后向组1单选按钮添加单击事件处理程序，以便在单击“是”时，选择容器类中“是”类内的所有单选按钮。

<li>
  <div class="yes"><input type="radio" name="Group 1"></div>
  <div class="no"><input type="radio" name="Group 1"></div>
  Group 1  
</li>
<li class="group1" style="padding-left:25px">
  <div class="yes"><input type="radio" name="Item 1"></div>
  <div class="no"><input type="radio" name="Item 1"></div>
  Item 1
</li>
<li class="group1" style="padding-left:25px">
  <div class="yes"><input type="radio" name="Item 2"></div>
  <div class="no"><input type="radio" name="Item 2"></div>
  Item 2
</li>
<li>
  <div class="yes"><input type="radio" name="Group 2"></div>
  <div class="no"><input type="radio" name="Group 2"></div>
  Group 2  
</li>
<li class="group2" style="padding-left:25px">
  <div class="yes"><input type="radio" name="Item 3"></div>
  <div class="no"><input type="radio" name="Item 3"></div>
  Item 3
</li>
<li class="group2" style="padding-left:25px">
  <div class="yes"><input type="radio" name="Item 4"></div>
  <div class="no"><input type="radio" name="Item 4"></div>
  Item 4
</li>

要检查组1中的所有“是”按钮，您可以执行以下操作：

$(".group1 > .yes").children().val("true");

或类似的东西，我不记得检查收音机的语法是什么，但这就是想法。

使用JQuery选择一些兄弟元素

4 个答案: