JavaScript複選框取消選中

我有以下組複選框其它框，反之亦然：JavaScript複選框取消選中

Original: 
<INPUT TYPE="checkbox" ID="db1" class="db" checked> 
<INPUT TYPE="checkbox" ID="db2" class="db" checked> 
<INPUT TYPE="checkbox" ID="db3" class="db" checked> 
<INPUT TYPE="checkbox" ID="db4" class="db" checked> 

</br> 

Other: 
<INPUT TYPE="checkbox" ID="other" class="other" onclick="otherBoxes('other',this)">

及以下的javascript：

<script language="JavaScript" src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function otherBoxes(it,box) 
    { 
    $(function() 
     { 
     $(':checkbox').click(function() 
      { 
      if (this.checked) 
       { 
       $('.db').prop('checked',false); 
       } 
      } 
     ) 
     } 
    ) 
    } 
</script>

我所試圖做的是建立成才了所以當我檢查'其他'複選框時，'原始'複選框都未選中。然後我想要反過來，這樣如果一個（或多個）'原始'複選框被選中，'其他'複選框未被選中。

Javascript我到目前爲止有這樣做的第一部分，如果我檢查，然後取消選中，然後再次檢查'其他'框，'原始'框未選中。但是，我希望它在第一次檢查盒子時工作。

它也有一個意想不到的結果，即在選中'其他'框後，原'框'拒絕被檢查，即使我取消選中'其他'框。

我發現了很多類似情況的例子，但都不一樣，而且我還沒有能夠適應我發現的任何情況。我該怎麼做？

來源

2013-05-22 IGGt

您在那裏有jQuery代碼，jQuery解決方案是否可以接受？ –

你可以嘗試這樣的事情

$('.other').on('click' , function() { 
$('.db').each(function(){ 
    $(this).removeAttr('checked'); 
}) 
}); 

$('.db').on('click', function(){ 
    $('.other').removeAttr('checked'); 
});

這是一個工作的jsfiddlehttp://jsfiddle.net/vQTFm/

附：：我建議你避免使用類似的名字beetwen id s和class s，因爲它可能會令人困惑。

來源

2013-05-22 13:51:12 steo

感謝您的迴應。那工作很有魅力。我唯一需要改變的地方是添加：$（window）.load（function（）{到開頭。 – IGGt

很高興它解決了 – steo

使用下面的JS代碼：

<script type="text/javascript"> 

    function otherBoxes(it,box) 
    { 
    if (box.checked) 
     { 
      $('.db').prop('checked',false); 
     } 
    } 
    </script>

來源

2013-05-22 13:50:42

你應該使用jQuery而不是在HTML中綁定事件。

下面是一些代碼，你想要做什麼，它結合上的複選框的更改事件，然後檢查它是否是被檢查的other或db複選框，並取消選中所需的複選框：

$(function() { 
    $('.db, #other').on('change', function() { 
     if (this.checked) { 
      if ($(this).is('#other')) { 
       $('input:checkbox').not('#other').prop('checked', false); 
      } else { 
       $('#other').prop('checked', false); 
      } 
     } 
    }); 
});

工作示例 - http://jsfiddle.net/YD5SE/2/

來源

2013-05-22 13:55:06

JavaScript複選框取消選中

回答

相關問題