Javascript複選框方案

我目前有一個代碼顯示基於兩個複選框的DIV。目前，您可以選中兩個複選框，並顯示兩個DIV。我不希望發生這種情況。我怎樣才能做到這一點，所以你選擇兩個複選框，它顯示另一個DIV？Javascript複選框方案

總之，一個複選框顯示一個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>

來源

2013-04-12 evanvee

確保你改變你的第二個'id =「更新由於ID必須是唯一的，所以在你的例子中_div「'是其他的東西。 – j08691

謝謝@ j08691！ – evanvee

你會想這樣的事情（使用jQuery）：

編輯在切換更新布爾（）（工作示例這裏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-12 21:29:14 cfs

我試過了，這沒有奏效。 – evanvee

哎呀...現在嘗試，有切換（）的值不太正確 – cfs

這適用於jsfiddle，但似乎無法在我的瀏覽器上得到這個權利。 – evanvee

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-12 21:31:00 undefined

這可以工作，但插入和更新DIV不應顯示何時插入和更新被選中。只有兩個DIV應該顯示。 – evanvee

Javascript複選框方案

回答

相關問題