選擇一個div取消選擇其他divs就像一個單選按鈕？

Question

我創建使用數據庫循環的div名單..

當我點擊select..it變得像

我面臨的問題是，在一個時間我可以只選擇一個公司...我怎麼能選擇一個諾特爾公司，這將使先前選定的公司取消選擇...... 的程序是這樣的...

{section name=i loop=$id7} 
    <div class="company" style="width:220px; height:220px; background-color:white;margin-left:12px;margin-bottom:22px;float:left;" > 

    <div id="ctable"> 
     <table style="margin-top:20px;margin-left:18px;width:178px;height:149px;"> 
     <tr style="text-align:center;"> 
      <td colspan="2" align="center" valign="center" height="42px">{$id7[i].vCompanyName}</td> 
     </tr> 
     <tr> 
      <td colspan="2" align="center" valign="center" height="107px"> 
      <img src="{$tconfig.tsite_images}{$id7[i].vImage}"> 
      </td> 
     </tr> 
     </table> 
    </div> 


    <div id="selecty" class="{$id7[i].iEmployerId}" style="width:178px;height:32px; margin-left:18px;"> 
     <a href="javascript:void(0);" onclick="selecty_hide('{$id7[i].iEmployerId}','{$smarty.section.i.index}')" class="but_blue_small">Select</a> 
    </div> 

    <div id="selected_state" style="width:198px;height:32px;display:none;background-color:white;margin-left:16px;">&nbsp; 
     <img src="{$tconfig.tsite_images}tick.png" />&nbsp;<font color="#cdcdcd"><b>Company selected</b></font> 
    </div> 
    </div> 
{/section}   

和JavaScript是這樣

<script> 
    function selecty_hide (eid,compid) { 
    alert(eid); 
    alert(compid); 
    document.getElementById('selecty').style.display="none"; 
    document.getElementById('selected_state').style.display="block"; 
    document.getElementById('eid').value=eid; 
    } 
</script> 

Answer 1

看，其操作簡單，你可以解決你的問題是這樣的：添加和刪除CSS類。

我做了一個完整的JSFiddle here你知道我在說什麼。

修改了HTML公司股利是唯一的一個，不是兩個div：

<div id="selecty" class="selectable_state" onclick=select_unselect('{$id7[i].iEmployerId}','{$smarty.section.i.index}') > 
    Select 
</div> 

並修改了JS：

function select_unselect(eid,compid){ 
    alert(eid); 
    alert(compid); 
    if ($(this).hasClass('selectable_state')) 
    { 
     $(this).removeClass('selectable_state'); 
     $(this).addClass('selected_state'); 
     $(this).html('Company Selected'); 
     $('#eid').val(eid); 
    }else{ 
     $(this).removeClass('selected_state'); 
     $(this).addClass('selectable_state'); 
     $(this).html('Select'); 
     $('#eid').val('');   
    } 
    } 

PS：請注意，在小提琴我刪除了一些參數的功能，使其工作，因爲我沒有所有的數據，使其正常工作。

Answer 2

如果你可以使用jQuery很容易

<div class="mydiv" style="cursor: pointer;"> 
    box 1 
</div> 
<div class="mydiv" style="cursor: pointer;"> 
    box 2 
</div> 
<div class="mydiv" style="cursor: pointer;"> 
    box 3 
</div> 

<script type="text/javascript"> 
    $(".mydiv").click(function() { 
     if($(this).hasClass("selected") == false) { 
      $(".mydiv").removeClass("selected"); 
      $(this).addClass("selected"); 
     } else { 
      $(".mydiv").removeClass("selected"); 
     } 
    }); 
</script> 

這將刪除從與類「mydiv」所有元素「選擇」之類的，然後把它添加到您單擊的單個元素。

它也支持取消選擇當前元素+你可以完全放下你的按鈕，這足以點擊div！

您應該可以將我的示例調整爲您的代碼。

您現在需要做的就是爲div定義一個自定義類，它將顯示其內容的不同，例如當div具有「selected」類時，只顯示「company selected」。

玩得開心，祝你好運！

Answer 3

假設您有選定的公司div的類（selected_company）。 當有人選擇任何其他股利，然後得到先前選定的股利，並刪除這個類，然後添加此類在當前選定的股利。

事情是這樣的：

$(".selected_company").removeClass('selected_company'); 
$(this).addClass('selected_company'); 

然後在同一時間只有一家公司將被選中。

下面是一個例子演示：http://jsfiddle.net/kRD4S/

Answer 4

在javscript井稍加修改可以做如下

<script> 
function selecty_hide (eid,compid,element) { 
    alert(eid); 
    alert(compid); 
    document.getElementById('selecty').style.display="none"; 
    document.getElementById('ctable').style.display="none"; 
    document.getElementById('selected_state').style.display="none"; 
    element.style.display="block"; 
    document.getElementById('eid').value=eid; 
} 

需要的函數調用（第三個參數）爲「期間通過另一參數這'

onclick="selecty_hide('{$id7[i].iEmployerId}','{$smarty.section.i.index}',this)" 

上面的腳本wi首先不顯示id爲selecty，ctable，selected_state的所有div，這將顯示阻止選定的div。

希望這可以幫到你

Answer 5

想一想，它稍有不同。如果選擇公司A，並且用戶現在選擇公司B：

• 取消選擇所有元素。
• 現在選擇B公司

如果你像這樣做，有一個在試圖找出你可以不選這家公司沒有任何麻煩。

事情是這樣的：

$(".company").click(function() { 
    //remember the new item 
    var clickedItem = $(this); 

    //unselect everything 
    $(".company").removeClass("companySelected"); 

    //select the company that was clicked 
    clickedItem.addClass("companySelected"); 
});