2

我目前有一个代码显示基于两个复选框的 DIV。目前，您可以同时选中这两个复选框，两个 DIV 都会显示。我不希望这种情况发生。我怎样才能做到这一点，以便您选择显示另一个 DIV 的两个复选框？

总之，一个复选框显示一个 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）：

编辑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 回答