jquery向下钻取答案

【问题标题】：jquery drill downjquery向下钻取
【发布时间】：2012-05-20 19:51:03
【问题描述】：

我正在尝试在选中复选框时更改按钮的类，但我无法正确设置它。当复选框被选中时，我想将按钮类从 buttonshide 更改为 buttonshow。

HTML

<div class="checkbox">
    <input id="ChartstoDisplayAll" type="checkbox"     name="ctl00$MainContent$ChartstoDisplayAll" /><label for="ChartstoDisplayAll">Select All</label>
    <p class="checkbox" style="margin-left:5px;"> or select individually below </p>
    <hr class="horizline" style="width:870px;"/>
</div>

    <div id="buttons" class="buttonshide">
        <input type="image" name="ctl00$MainContent$btnGetChart"  id="MainContent_btnGetChart" title="Click here to retrieve the charts" Text="Build the  Charts" src="Styles/Images/stats.png" alt="Build the Charts" align="left" />
        <p style="font-size:.8em; font-weight:bold;">Build Charts</p>
    </div>

仅供参考...这两个 div 之间还有其他 html。为了简洁起见，我把它拿出来，因为没有一个按钮 id。

这里是javascript。（我尝试过的最新方法）

 //this script will change the style of the "Select All" checkbox and make visible the "Build Chart" button
  $(document).ready(function () {
      $('#ChartstoDisplayAll').click(
          function () {
              $("INPUT[type='checkbox']").attr('checked', $('#ChartstoDisplayAll').is(':checked'));
              $(this).next().toggleClass("selected");
              $(this).find("buttons").toggleclass("buttonsshow");
          });
  });

这是小提琴链接 http://jsfiddle.net/dinotom/h25tM/2/

这是已完成的工作脚本，它会更改文本颜色并在选中复选框时显示按钮。

 //this script will change the style of the "Select All" checkbox and make visible the "Build Chart" button
  $(document).ready(function () {
      $('#ChartstoDisplayAll').change(
          function () {
              if ($('#ChartstoDisplayAll').is(':checked')) {
                  $(this).next().addClass("selected");
                  $('#buttons').addClass("buttonsshow").removeClass('buttonshide');
              } else {
                  $('#buttons').addClass("buttonshide").removeClass('buttonsshow');
                  $(this).next().removeClass("selected");
              }
          });
  });

【问题讨论】：

你已经清楚地解释了你想要什么，这太棒了。但是你得到了什么错误？你看到的行为是什么？告诉我们这是在做什么。给我们一个开始的地方。
您要添加的selected 应该是什么类？
.selected 用于复选框文本颜色，正如您在小提琴中看到的那样正常工作，但我需要深入到按钮并更改其类

标签： jquery

【解决方案1】：

试试这个：

if ($('#ChartstoDisplayAll').is(':checked')) {
  $(this).find("buttons").addClass("buttonsshow").removeClass('buttonshide');
} else {
  $(this).find("buttons").addClass("buttonshide").removeClass('buttonsshow');
}

另外，您应该使用change 事件而不是click

【讨论】：

这应该在你的函数中而不是 $(this).find("buttons").toggleclass("buttonsshow");
我的脚本中唯一的错误是这一行...$(this).find("buttons").toggleclass("buttonsshow");显然没有找到合适的对象来改变类
我将那行代码更改为您的代码，无论是在小提琴中还是在我的页面上，它都不会更改按钮类。
jmort253...很简单，脚本的第一部分将类更改为选中，这会将复选框的文本颜色更改为绿色。那行得通，这不行。我还希望在选中该复选框时显示一个不可见的按钮。这是通过两个 CSS 选择器 buttonshow 和 buttonshide 完成的。

【解决方案2】：

基本上这应该会有所帮助：

jsFiddle demo

$('#ChartstoDisplayAll').on('change', function() {
    $(this).next('label').toggleClass("selected");      
    $("input[type='image']").toggleClass("buttonsshow");      
});

顺便说一句：我更改了您的 CSS 并添加了一些 cmets，请查看演示

【讨论】：