Question

我的代码如下所示：

<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>England</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england"> Chelsea
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england"> Mu
                </label>
            </div>
        </li>
        ...
    </ul>
</div>
<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>Spain</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain"> Madrid
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain"> Barcelona
                </label>
            </div>
        </li>
        ...
    </ul>
</div>

演示：https://jsfiddle.net/oscar11/m7by6zcw/6/

我希望取消选中单选按钮。因此，如果选中单选按钮，则可以再次取消选中它。

我该怎么做？

Answer 1

其他答案都是正确的，您将输入的checked属性设置为false。

inputElement.checked = false;

但我想我明白你要做什么（取消选中点击一个选中的选项），这比我的经验要有点棘手。问题与check属性在响应事件时查看它总是解析为true有关，因为更改发生在事件处理程序触发之前。为了解决这个问题，我总是在元素上设置一个自定义属性来跟踪当前事件循环之前检查的内容。

var radios = document.querySelectorAll('input[type="radio"]');
for(var i = 0; i < radios.length; i++){
radios[i].addEventListener('click', uncheckIfChecked);
}

function uncheckIfChecked(event){
if(event.currentTarget.alreadyChecked) event.currentTarget.checked = false;
updateChecked();
}

function updateChecked(){
	for(var x = 0; x < radios.length; x++){
  	if(radios[x].checked == true){
    	radios[x].alreadyChecked = true;
    }else{
    	radios[x].alreadyChecked = false;
    }
  }
}

<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>England</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england"> Chelsea
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england"> Mu
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="england"> Arsenal
                </label>
            </div>
        </li>
    </ul>
</div>
<div class="col-md-4">
    <ul class="list-unstyled">
        <li><strong>Spain</strong></li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain"> Madrid
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain"> Barcelona
                </label>
            </div>
        </li>
        <li>
            <div class="checkbox">
                <label>
                    <input type="radio" name="spain"> Atletico
                </label>
            </div>
        </li>
    </ul>
</div>

不确定这是否正是您所寻找的，但希望这对您有所帮助！

Answer 2

也许这可以帮到你：

https://stackoverflow.com/a/15105717/3710195

package com.ca.training.task.app;

import java.io.IOException;
import java.net.ServerSocket;

public class App {

    public void execute() {
        LoginRunnable loginRunnable = new LoginRunnable();
        loginRunnable.setLoginInformation(new Object());//Login information

        FileRunnable fileRunnable = new FileRunnable();//Data for loaded runnable.
        fileRunnable.setParams(new Object());

        startLoginThread(loginRunnable);
        startFileThread(fileRunnable);
    }

    private static void startLoginThread(LoginRunnable loginRunnable) {
        Thread loginThread = new Thread(loginRunnable);
        loginThread.start();
    }

    private static void startFileThread(FileRunnable fileRunnable) {
        Thread loadedThread = new Thread(fileRunnable);
        loadedThread.start();
    }

    class LoginRunnable implements Runnable {

        private Object loginInformation;

        @Override
        public void run() {
            try {
                ServerSocket loginSocket = new ServerSocket(8000);
                loginSocket.accept();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        public Object getLoginInformation() {
            return loginInformation;
        }

        public void setLoginInformation(Object loginInformation) {
            this.loginInformation = loginInformation;
        }
    }

    class FileRunnable implements Runnable {

        private Object params;

        @Override
        public void run() {
            try {
                ServerSocket fileSocket = new ServerSocket(7000);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        public Object getParams() {
            return params;
        }

        public void setParams(Object params) {
            this.params = params;
        }
    }
}

将“data-waschecked”属性添加到单选按钮

$(function(){
    $('input[type="radio"]').click(function(){
        var $radio = $(this);

        // if this was previously checked
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
        }
        else
            $radio.data('waschecked', true);

        // remove was checked from other radios
        $radio.siblings('input[type="radio"]').data('waschecked', false);
    });
});

Answer 3

执行一个将单选按钮的checked属性设置为false的函数。

Answer 4

将其包裹在form中并添加重置按钮，然后返回原始状态。

<form>
...
<input type="reset">
</form>

https://jsfiddle.net/m7by6zcw/7/

如何取消选中单选按钮？

4 个答案: