0

チェックボックスをオンにすると、関連する UL が展開され、選択に基づいてより多くのオプションが表示されるように、フォームをセットアップしました。機能しますが、ユーザーがチェックボックスのラベルをクリックした場合のみです。チェックボックスをクリックすると、UL は期待どおりに展開されますが、ボックスはチェックされません。

Javascript:

  jQuery(document).ready(function()
  {
     jQuery('.toggleUL').click(function()
     {
        var checkbox = jQuery(this).find('input');
        var ul       = jQuery(this).next('ul');

        if (ul.css('display') == 'block') { ul.find('input').attr('checked', false); }

        if (checkbox.attr('checked') == false)
        {
           checkbox.attr('checked', true);
        }
        else
        {
           checkbox.attr('checked', false);
        }


        ul.slideToggle('slow'); return false;
     });
  });

HTML:

       <label class="toggleUL"><input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />xxx</label>
       <ul style="list-style-type: none; display: none">
          <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1" value="xxx" />xxx</label></li>
          <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2" value="xxx" />xxx</label></li>
          <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3" value="xxx" />xxx</label></li>
       </ul>

slideToggle() 関数が正常に機能していませんでした。ボックス/ラベルをクリックすると、UL が展開してすぐに収縮します。停止させる唯一の方法は、「return false;」を追加することでした。もちろん、これによりチェックボックスがチェックされなくなります。したがって、checkbox.attr() です。

ハッキングされたコード、私は知っています。しかし、どうすればチェックボックスを機能させることができますか? >.<

4

3 に答える 3

1

クリックイベントをチェックボックスに直接アタッチし、要素のfor属性を使用してチェックボックスに関連付けることをお勧めします。label

<input type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />
<label for="quoteWebsite">xxx</label>

私はあなたのコードを単純化しました：

jQuery(function () {
     jQuery('#quoteWebsite').click(function() {
        var checkbox = jQuery(this),
            ul = jQuery(this).siblings('ul');

        if (ul.css('display') == 'block') {
          ul.find('input').attr('checked', false);
        }

        ul.slideToggle('slow');
     });
});

クリックイベントがチェックボックスに添付されているため、checked属性の切り替えやイベントのキャンセルを手動で処理する必要はありません。

上記の例をここで確認してください。

于 2009-11-06T07:43:18.940 に答える
0

for="quoteWebsite"ラベルにプロパティを追加

<label class="toggleUL" for="quoteWebsite"><input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />xxx</label>
   <ul style="list-style-type: none; display: none">
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1" value="xxx" />xxx</label></li>
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2" value="xxx" />xxx</label></li>
      <li style="margin-left: 20px"><label><input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3" value="xxx" />xxx</label></li>
   </ul>

したがって、ユーザーがラベルをクリックすると、チェックボックスに影響し、チェックボックスにクリックイベントハンドラーを追加するだけで済みます。

jQuery(document).ready(function()
{
  jQuery('#quoteWebsite').click(function()
  {
    var checkbox = jQuery(this);
    var ul       = jQuery(this).closest('label').next('ul');

    if (ul.css('display') == 'block') { ul.find('input').attr('checked', false); }

    if (checkbox.attr('checked') == false)
    {
       checkbox.attr('checked', true);
    }
    else
    {
       checkbox.attr('checked', false);
    }


    ul.slideToggle('slow'); return false;
  });
});
于 2009-11-06T07:40:37.733 に答える
0

チェックボックスを扱う場合、クリックイベントはクロスブラウザーではないため、チェックボックスの変更イベントを使用することをお勧めします。次の議論を確認してくださいJQuery Click vs Change

CMS のソリューションで気付いたもう 1 つのことは、小さな問題があることです。次のシナリオを考えてみましょう: たとえば、チェックボックスをオンにすると、オプションが展開され、何らかの理由でページが更新されます。メインのチェックボックスはオンのままですが、他のオプションは折りたたまれます。その後、あなたは本当の対立に陥ります。チェックボックスをオフにすると、オプションが展開され、その逆も同様です。

以下に修正があります。はるかにシンプルでクリーンです。アクションをチェックしてください。

<label for="quoteWebsite">xxx</label>
<input style="margin-right: 10px" type="checkbox" name="quoteWebsite" id="quoteWebsite" value="xxx" />  

    <ul id="options" style="list-style-type: none; display: none">
        <li style="margin-left: 20px">
            <label>
                <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite1"
                    value="xxx" />xxx</label></li>
        <li style="margin-left: 20px">
            <label>
                <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite2"
                    value="xxx" />xxx</label></li>
        <li style="margin-left: 20px">
            <label>
                <input style="margin-right: 10px" type="checkbox" name="quoteWebsite1[]" id="quoteWebsite3"
                    value="xxx" />xxx</label></li>
    </ul>




    $(document).ready(function(){

        $('#quoteWebsite').change(function(){            
            $('#options').slideToggle('slow');
        });

        if ($('#quoteWebsite').is(':checked')) {
            $('#options').slideDown();
        } else {
            $('#options').slideUp();
        }  
    });
于 2009-11-06T08:37:09.990 に答える