Javascript 选择一个div会像单选按钮一样取消选择其他div？

我使用数据库中的循环创建了一个div列表。。

当我单击“选择”时，它会变成

我面临的问题是，在同一时间，我只能选择一家公司…我怎么能选择另一家公司，使以前选择的公司取消选择。。。 节目是这样的

{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}          

{section name=i loop=$id7}
{$id7[i].vCompanyName}
选定的公司
{/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>

功能选择隐藏（eid、compid）{
警报（eid）；
警报（compid）；
document.getElementById（'selecty'）.style.display=“无”；
document.getElementById（'selected_state'）.style.display=“block”；
document.getElementById（'eid'）。value=eid；
}

如果您可以使用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>

方框1
方框2
方框3
$（“.mydiv”）。单击（函数（）{
if（$（this）.hasClass（“selected”）==false）{
$（“.mydiv”）.removeClass（“选定”）；
$（此）.addClass（“选定”）；
}否则{
$（“.mydiv”）.removeClass（“选定”）；
}
});

这将从具有类“mydiv”的所有元素中删除类“selected”，然后将其添加到您单击的单个元素中

它还支持取消选择当前元素+您可以完全放下按钮，单击div就足够了

您应该能够根据您的代码调整我的示例

您现在需要做的就是为div定义一个自定义类，该类将显示其不同的内容，比如当div选择了类“selected”时只显示“companyselected”

祝你玩得开心，好运

假设您为所选公司部门设置了一个类（所选公司）。 当有人选择任何其他div时，获取上一个选定的div并删除该类，然后将该类添加到当前选定的div中

大概是这样的：

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

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

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

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

那么一次只能选择一家公司

---

下面是一个示例演示：

在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;
 }

上面的脚本将首先显示所有id为selecty、ctable、selected_状态的div，这将显示block所选div

---

希望这有助于你对它的思考有所不同。如果选择了公司A，并且用户现在选择了公司B：

• 取消选择所有元素
• 现在选择B公司

如果你是这样做的，那么想清楚你需要取消选择哪家公司就没有什么麻烦了

大概是这样的：

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

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

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

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

---

看，这很简单，你可以这样解决你的问题：添加和删除CSS类

我已经向你充分说明了我在说什么。

将HTML公司Div修改为只有一个而不是两个Div:

挑选

并修改了js:

功能选择\u取消选择（eid，compid）{
警报（eid）；
警报（compid）；
if（$（this）.hasClass（'selective_state'））
{
$（this.removeClass（'selective_state'）；
$（this.addClass（'selected_state'）；
$（this.html（'Company Selected'）；
$（'eid'）.val（eid）；
}否则{
$（this.removeClass（'selected_state'）；
$（this.addClass（'selective_state'）；
$（this.html（'Select'）；
$（'#eid'）.val（''）；
}
}

---

Ps：请注意，在fiddle中，我删除了函数的一些参数以使其正常工作，因为我没有使其正常工作的所有数据。

如果有人意外地选择了一家公司怎么办？？没有取消选择的选项。页面顶部有一个“下一步”按钮……当有人选择一家公司时，他会选择“下一步”按钮进行进一步选择navigation@RenMathew我已经把你的问题解决了，看看我的答案你需要颠倒你的if语句，它才能按预期工作：）