Javascript 保持按钮处于选中状态_Javascript_Jquery_Html_Twitter Bootstrap

Javascript 保持按钮处于选中状态

javascript jquery html twitter-bootstrap

Javascript 保持按钮处于选中状态,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我有以下三个利克特量表： <div class="btn-toolbar" role="toolbar" aria-label="..."> <div class="btn-group" role="group" aria-label="..."> <a class="btn btn-link disabled" disabled>Not Dangerous</a> <button id="fear" type="butt

我有以下三个利克特量表：

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="fear" type="button" class="btn btn-default likert-1">1</button>
    <button id="fear" type="button" class="btn btn-default likert-2">2</button>
    <button id="fear" type="button" class="btn btn-default likert-3">3</button>
    <button id="fear" type="button" class="btn btn-default likert-4">4</button>
    <button id="fear" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="danger" type="button" class="btn btn-default likert-1">1</button>
    <button id="danger" type="button" class="btn btn-default likert-2">2</button>
    <button id="danger" type="button" class="btn btn-default likert-3">3</button>
    <button id="danger" type="button" class="btn btn-default likert-4">4</button>
    <button id="danger" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="control" type="button" class="btn btn-default likert-1">1</button>
    <button id="control" type="button" class="btn btn-default likert-2">2</button>
    <button id="control" type="button" class="btn btn-default likert-3">3</button>
    <button id="control" type="button" class="btn btn-default likert-4">4</button>
    <button id="control" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>

但是，在选择第一个利克特标度并在第二个利克特标度上进行选择后，第一个利克特标度的选择将丢失。参见gif：

首先，您不应该有重复的ID。将其更改为以下内容：

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="fear1" type="button" class="btn btn-default likert-1">1</button>
    <button id="fear2" type="button" class="btn btn-default likert-2">2</button>
    <button id="fear3" type="button" class="btn btn-default likert-3">3</button>
    <button id="fear4" type="button" class="btn btn-default likert-4">4</button>
    <button id="fear5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="danger1" type="button" class="btn btn-default likert-1">1</button>
    <button id="danger2" type="button" class="btn btn-default likert-2">2</button>
    <button id="danger3" type="button" class="btn btn-default likert-3">3</button>
    <button id="danger4" type="button" class="btn btn-default likert-4">4</button>
    <button id="danger5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="control1" type="button" class="btn btn-default likert-1">1</button>
    <button id="control2" type="button" class="btn btn-default likert-2">2</button>
    <button id="control3" type="button" class="btn btn-default likert-3">3</button>
    <button id="control4" type="button" class="btn btn-default likert-4">4</button>
    <button id="control5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>

有关DOM中ID唯一性的更多信息，请快速查看。这将为您节省很多麻烦。

首先，您不应该有重复的ID。将其更改为以下内容：

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="fear1" type="button" class="btn btn-default likert-1">1</button>
    <button id="fear2" type="button" class="btn btn-default likert-2">2</button>
    <button id="fear3" type="button" class="btn btn-default likert-3">3</button>
    <button id="fear4" type="button" class="btn btn-default likert-4">4</button>
    <button id="fear5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="danger1" type="button" class="btn btn-default likert-1">1</button>
    <button id="danger2" type="button" class="btn btn-default likert-2">2</button>
    <button id="danger3" type="button" class="btn btn-default likert-3">3</button>
    <button id="danger4" type="button" class="btn btn-default likert-4">4</button>
    <button id="danger5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>
<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">
    <a class="btn btn-link disabled" disabled>Not Dangerous</a>
    <button id="control1" type="button" class="btn btn-default likert-1">1</button>
    <button id="control2" type="button" class="btn btn-default likert-2">2</button>
    <button id="control3" type="button" class="btn btn-default likert-3">3</button>
    <button id="control4" type="button" class="btn btn-default likert-4">4</button>
    <button id="control5" type="button" class="btn btn-default likert-5">5</button>
    <a class="btn btn-link disabled" disabled>Extremely Dangerous</a>

  </div>
</div>

有关DOM中ID唯一性的更多信息，请快速查看。这将为您省去很多麻烦。

您的错误1：每个项目的id值必须是唯一的。你的错误2：你必须使用类或其他东西按类型分开点选择器

我想这对你有帮助

www.codepen.io/airsakarya/pen/RaBMyE?editors=1010

错误1：每个项目的id值必须是唯一的。你的错误2：你必须使用类或其他东西按类型分开点选择器

我想这对你有帮助

www.codepen.io/airsakarya/pen/RaBMyE?editors=1010

首先，您不应使用ID选择多个元素。ID用于指定单个dom元素，请改用类

其次，可能是你弄乱了引导程序的javascript

尝试按照此操作获得单选按钮的本机行为

首先，您不应使用ID选择多个元素。ID用于指定单个dom元素，请改用类

其次，可能是你弄乱了引导程序的javascript

尝试按照此操作，通过单选按钮获得本地行为

HTML

<section class="buttons" role="group"> 
  <button>button 1</button> 
  <button>button 2</button> 
  <button>button 3</button>
</section>

<section class="buttons" role="group"> 
  <button>button 1</button> 
  <button>button 2</button> 
  <button>button 3</button>
</section>

HTML

<section class="buttons" role="group"> 
  <button>button 1</button> 
  <button>button 2</button> 
  <button>button 3</button>
</section>

<section class="buttons" role="group"> 
  <button>button 1</button> 
  <button>button 2</button> 
  <button>button 3</button>
</section>

每页是否可能有多个按钮处于聚焦状态（即突出显示）？我想不是。按钮通常不表示选择状态，而突出显示表示当前哪个表单元素具有焦点。那些重复的ID无助于解决问题。每页是否可能有多个按钮处于焦点状态（即突出显示）？我想不是。按钮通常不表示选择状态，而突出显示表示哪个表单元素现在有焦点。那些重复的ID没有帮助。