0

以下の提案のおかげで、これが私が思いついたコードです。それらのほとんどすべてが提供されたとおりに機能しましたが、現実世界との接触を生き延びたものはありませんでした. その理由と残りの問題は次のとおりです。

以下のコンテンツは、3 つのチェックボックスと、チェックボックスがオンまたはオフになると表示および非表示になるはずの DIVS のセットを示しています。最初の試行では、それらは機能しているように見えます。各チェックボックスを左から右にチェックすると、それぞれの問題のコンテンツが明らかになります。

ただし、チェックを外してもコンテンツが非表示にならない場合があります。2 番目と 3 番目のチェックボックスの場合、テストがあります。検索された DIV の 1 つに「Greentooth」と「Redtooth」の両方が含まれています。つまり、2 番目のチェックボックスをオンにすると、Greentooth を含むすべてのものが表示され、3 番目のボックスをオンにすると、それ以上は表示されません。これは、Redtooth 項目が Greentooth 項目と共に存在するためです。これは正しい動作ですが、Greentooth (2nd) チェックボックスのチェックを外すと、Greentooth 専用の DIVS を非表示にする必要がありますが、そうではありません。Redtooth DIVS のチェックを外すと非表示になる場合と表示されない場合があり、最初のチェックボックスのチェックを外すと機能する場合と機能しない場合があります。

したがって、JS/JQuery はチェックボックスの CHECKED 結果に注意を払っているように見えますが、残りのチェックボックスを反復処理してそれらの状態をチェックしているようには見えません。これは正しいです？

JQuery Listen と Live で遊んでみましたが、どこにも行きませんでした。ある種のループが必要ですか？

私が言っていることが理解できない場合は、コードをブラウザに入れて、数回チェックを入れたり外したりしてみてください。

ご協力ありがとうございます。

    <!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="jquery-1.6.2.min.js"></script>


</head>
<body>

<script type="text/javascript">

$(document).ready(function()
{

    $("form[name=form1] input:checkbox").click(function()
 {  
       $(".rightcolumn div:contains('"+this.value+"')").css("display", this.checked?"block":"none");
            });
            });      
</script>

<div name="leftcolumn">

<form action="" method="post" name="form1" >
  <label>
    <input type="checkbox" id="Yoko" value="Sabretooth">
    Sabretooth
  </label>
  <label>
    <input type="checkbox" id="Yoko-" value="Greentooth">
    Greentooth
  </label>
  <label>
    <input type="checkbox" id="Ringo" value="Redtooth">
    Redtooth
  </label>
</form>
  </div>

    <div class="rightcolumn">   
    <style type="text/css">
    label
{
    font-weight: bold;
}


.hide
{
    display: none;
}

.show
{
    display: block;
}
  </style>
        <div name="hider" class="hide">
        John Resig Sabretooth
        </div>
        <div name="hider" class="hide">
        George GreentoothMartin
        </div>
        <div name="hider" class="hide">
        Malcom John Greentooth GreentoothRedtoothSinclair
        </div>
        <div name="hider" class="hide">
        J. Ohn
        </div>
        <div name="hider" class="hide">
        George toothMartin
        </div>
        <div name="hider" class="hide">
        Malcom John Greentooth GreentoothRedtoothSinclair
        </div>
        <div name="hider" class="hide">
        J. Ohn
        </div>
    </div>

</body>
</html>
4

3 に答える 3

0

有効な html ではない複数のチェックボックスに対して同じ ID を持っているようです。しかし、あなたはこの解決策を試すことができます

<form name="form1" method="post" action="">
  <label>
    <input type="checkbox" name="checkboxx1" value="john">
    Sabretooth</label>
    <label>
    <input type="checkbox" name="checkboxx2" value="ohnn">
    Greentooth</label>
    <label>
    <input type="checkbox" name="checkboxx3" value="xyz">
    Redtooth</label>
</form>

//I am setting the keyword to look for in the value field of each checkbox.

    $(function(){

      $("form[name=form1] input:checkbox").click(function(){
        $("div:contains('"+this.value+"')").css("display", this.checked?"block":"none");
      });

    });
于 2011-08-11T14:21:56.167 に答える
0

チェックボックスに value 属性を追加すると、それを使用してdiv表示する sを選択できます。

$('input[type=checkbox]').click(function()
{
    $("div:contains('"+$(this).val()+"')").toggle();
});
于 2011-08-11T14:17:59.140 に答える
0 
$('input[type=checkbox]').click(function()
{   
 $("div").each(function()
    {
    //a regex to match the text got from $(this).innerText or this.InnerHTML to $(this).val()
    //if it returns true then
    $(this).show();
    })
});
于 2011-08-11T14:18:16.930 に答える