0

私は共通の問題を抱えていますが、独特のひねりがあります。チェックボックスのリストがあります。チェックボックスごとに、1 つ以上の div を非表示/表示したい。このようなもの-チェックボックス1をチェックすると、div 1が表示されます。チェックボックス 2 をオンにすると、div 2 が表示されます。チェックボックス 3 をオンにすると、div 1 と 2 が表示されます。チェックボックス 1 と 3 を選択してから 3 のチェックを外すと、div 1 が表示されたままになります。コードは次のようになります (1 と 2 のチェックボックスのみが機能します)-

<input type="checkbox" name="1">1
<input type="checkbox" name="1">1
<input type="checkbox" name="2">2
<input type="checkbox" name="2">2
<input type="checkbox" name="???">1&2

<div id="showme1" style="display: none">Show me1</div>
<div id="showme2" style="display: none">Show me2</div>

<script type="text/javascript">

var MyCheckboxes1=$("input[name='1']");

MyCheckboxes1.change(function() {
  $("#showme1").toggle(MyCheckboxes1.is(":checked"));
});

var MyCheckboxes2=$("input[name='2']");

MyCheckboxes2.change(function() {
  $("#showme2").toggle(MyCheckboxes2.is(":checked"));
});
</script>
4

4 に答える 4

1

チェックボックスがチェックされているかどうかに基づいてif elseステートメントを使用する、このような単純なロジックはどうですか: http://jsfiddle.net/qvhpfzs7/

<input type="checkbox" id="c1"/> show Div 1
<br/>
<input type="checkbox" id="c2"/> show Div 2
<br/>
<input type="checkbox" id="c3"/> show Div 1 AND Div 2
<br/><br/>
<div class="div1">THIS IS THE CONTENT OF DIV 1</div>
<div class="div2">THIS IS THE CONTENT OF DIV 2</div>

$(document).ready(function(){
    $('.div1').hide();
    $('.div2').hide();
    var d1 = false;
    var d2 = false;
    $('input[type="checkbox"]').on('change', function(){
        if ($('#c1').is(':checked')) { d1 = true; }
        else { d1 = false; }
        if ($('#c2').is(':checked')) { d2 = true; }
        else { d2 = false; }
        if ($('#c3').is(':checked')) {
            d1 = true;
            d2 = true;
        }
        if (d1) { $('.div1').show(); } else { $('.div1').hide(); }
        if (d2) { $('.div2').show(); } else { $('.div2').hide(); }  
    });
});
于 2015-01-01T04:11:18.743 に答える
0

これが私が試したことです。お役に立てれば。

JavaScript -

function handleClick(cb) {
        if(cb.checked==true){
            if(cb.name==3){ // Show both div
                $('#showme1').show();
                $('#showme2').show();
            }else{
                $('#showme'+cb.name).show();
            }
        }else{
            if(cb.name==3){ // Show both div 
                $('#showme1').hide();
                $('#showme2').hide();
            }else{
                $('#showme'+cb.name).hide();
            }
        }
      }

HTML -

<input type="checkbox" name="1" onclick='handleClick(this);'>1
<input type="checkbox" name="1" onclick='handleClick(this);'>1
<input type="checkbox" name="2" onclick='handleClick(this);'>2
<input type="checkbox" name="2" onclick='handleClick(this);'>2
<input type="checkbox" name="3" onclick='handleClick(this);'>3

<div id="showme1" style="display: none">Show me1</div>
<div id="showme2" style="display: none">Show me2</div>

div が最初に表示されるときに toggle() を使用することもできます。

于 2015-01-01T05:45:49.240 に答える
0

わかりました、いくつか遊んだ後、ブライアンという名前の友人で頭脳派のアイデアから、私が思いついた解決策がここにあります. よく考えてみたら単純。

HTML- 

<div id="showme1" style="display: none">Show me1</div>
<div id="showme2" style="display: none">Show me2</div>

JS-

var MyCheckboxes1=$("input[class='1']");

MyCheckboxes1.change(function() {
  $("#showme1").toggle(MyCheckboxes1.is(":checked") || MyCheckboxes12.is(":checked"));
});

var MyCheckboxes2=$("input[class='2']");

MyCheckboxes2.change(function() {
  $("#showme2").toggle(MyCheckboxes2.is(":checked") || MyCheckboxes12.is(":checked"));
});


var MyCheckboxes12=$("input[class='12']");

MyCheckboxes12.change(function() {
  $("#showme1").toggle(MyCheckboxes1.is(":checked") || MyCheckboxes12.is(":checked"));
  $("#showme2").toggle(MyCheckboxes2.is(":checked") || MyCheckboxes12.is(":checked"));
});
于 2012-06-06T15:32:34.790 に答える