js怎样实现button点击它会被选中,再次点击取消选中?

Posted 2023-04-25

button
   background:#fff;

button.active
   background:red;

假设上边的css表示button的俩种状态，正常状态和选中状态

<button type='button' id="btn">按钮</button>

这个是按钮

var btn = document.getElementById('btn');
btn.onclick=function()//添加点击事件
    if(btn.className.indexOf('active')) //说明已经是选中状态
        btn.className = '';//清空class。
    else
        btn.className = 'active';//否则选中它，给它添加active样式
    



//如果用jquery，会很方便实现
$('#btn').click(function()//给id为btn的元素添加点击事件
    $(this).toggleClass('active');//每次点击的时候，将当前的元素切换active样式
                                  //如果有，则去掉，否则添加
);

参考技术A 给你个简单方法 当你点击时触发Click事件，在事件里面执行切换按钮的背景图片就OK啦 参考技术B 　　每次点击的时候都做个if判断，如果被选中了则让Checked=false，否则就选中；
　　参考如下：
　　var flag = true;
　　function chkRadio(id)
　　id.checked = flag;
　　flag = !flag;
　　
　　用html控件，改成服务器控件，在后台加上： RadioButton1.Attributes.Add("onclick","chkRadio(this)");
　　<input id="rType" type="radio" value="1" onclick="chkRadio(this)"/><label for="rType">测试</label>

html 通过再次点击他的标签#js取消选中radiobutton

  function setUncheckable(name) {
    let allRadios = document.getElementsByName(name);
    let boolRadio;
    for (let i = 0; i < allRadios.length; i++) {
      allRadios[i].addEventListener('click', function() {

        if (boolRadio === this) {
          this.checked = false;
          boolRadio    = null;

        } else {
          boolRadio = this;
        }
      });
    }
  }

  setUncheckable('filters');
});

<label class="labelsome">
  <input id="radio-a" type="radio" name="q" value="A" class="radiosome">A
</label>
<label class="labelsome">
  <input id="radio-b" type="radio" name="q" value="B" class="radiosome">B
</label>
<label class="labelsome">
  <input id="radio-c" type="radio" name="q" value="C" class="radiosome">C
</label>