1

チェックボックスがオンになっているときにボタンのクラスを変更しようとしていますが、正しく設定できません。チェックボックスが選択されているときに、buttonsクラスをbuttonshideからbuttonsshowに変更します。

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>

参考までに...これら2つの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");
              }
          });
  });
4

2 に答える 2

1

これを試して：

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

また、クリックの代わりに変更イベントを使用する必要があります

于 2012-05-20T20:00:20.800 に答える
0

基本的にこれは役立つはずです：

jsFiddle デモ

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

ところで: 私はあなたの CSS を変更し、いくつかのコメントを追加しました。デモを見てください。

于 2012-05-20T20:29:35.950 に答える