2

現在、2 つのチェックボックスに基づく DIV を示すコードがあります。現在、両方のチェックボックスを選択すると、両方の DIV が表示されます。私はこれが発生したくありません。別のDIVを表示する両方のチェックボックスを選択するようにするにはどうすればよいですか?

要約すると、1 つのチェックボックスには 1 つの DIV が表示され、別のチェックボックスには別のチェックボックスが表示され、両方ともまったく別のものを表示します。

<input type="checkbox" name="checkbox_insert" 
id="checkbox_insert" value="insert">Insert<br>
<input type="checkbox" name="checkbox_update" 
id="checkbox_update" value="update">Update</p>

<script type="text/javascript">
    $('#checkbox_insert').change(function() {
        $('#insert_div').toggle();
    });

    $('#checkbox_update').change(function() {
        $('#update_div').toggle();
    });
</script>

<div id="insert_div" style="display:none">
    INSERT
</div>

<div id="update_div" style="display:none">
    UPDATE
</div>

<div id="both_div" style="display:none">
    BOTH
</div>
4

2 に答える 2

2 
var $i = $('#checkbox_insert, #checkbox_update'),
    $d = $('div'),
    $b = $d.filter('#both_div');

$i.change(function () {
    $b.toggle($i.filter(':checked').length === $i.length);
    $d.filter('#' + this.value + '_div').toggle(this.checked);
});

http://jsfiddle.net/EeJXy/

于 2013-04-12T21:31:00.407 に答える
0

次のようなものが必要になります（jQueryを使用）：

EDIT toggle() のブール値を更新しました (動作例はこちらhttp://jsfiddle.net/uYUK2/ ):

$('input[type="checkbox"]').on('change', function() {
    var inserted = $('#checkbox_insert').prop('checked');
    var updated =  $('#checkbox_update').prop('checked'); 

    $('#both_div').toggle(inserted && updated);
    $('#insert_div').toggle(inserted && !updated);
    $('#update_div').toggle(updated && !inserted);
});
于 2013-04-12T21:29:14.477 に答える