установите только один флажок

Question

Я хотел бы построить javascript, чтобы пользователь мог выбрать только один вариант из упомянутых ниже. Не могли бы вы дать мне несколько советов, как это сделать, так как я нуб Javascript.

Спасибо!

Это изображение части меню

<td><label for="dock_books_search_visible_online"> Visible online?</label></td>
                        <td><input type="checkbox" name="option" value="checkedVisibleOk" id="dock_books_visible_ok"  /> </td>
                        <td><label for="dock_books_search_visible_online_yes"> Yes</label></td>
                        <td><input type="checkbox" name="option" value="checkedVisibleNok" id="dock_books_visible_nok" /> </td>
                        <td><label for="dock_books_search_visible_online_no"> No</label></td>

Answer 1

Для одиночного выбора из нескольких вариантов мы используем Radio Buttons, а не CheckBoxes.

Вы должны использовать что-то подобное.

<input type="radio" name="option" value="Yes" id="yes" /> 
<input type="radio" name="option" value="No" id="no" /> 

Но все же если вы хотите пойти по другому пути, просто добавьте следующий скрипт в ваш тег head:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(':checkbox').bind('change', function() {
        var thisClass = $(this).attr('class');
        if ($(this).attr('checked')) {
            $(':checkbox.' + thisClass + ":not(#" + this.id + ")").removeAttr('checked');
        }
        else {
            $(this).attr('checked', 'checked');
        }
    });
});
</script>

Вот вышеописанная скрипка .

Надеюсь, этопомогает.

Answer 2

Вы получили возможность использовать радиокнопки в любом случае, вот решение javascript, которое я использовал в своем проекте, когда есть критерии поиска и результат поиска в сетке данных с помощью ajax, имеющего 13 записей, когда я проверяю одну запись, она отключает остальные

код для включения разрешения включения JavaScript, флажки jsfiddle

<form  name="mainForm" method="GET">

   Visible online?


       <input type="checkbox" name="option" value="checkedVisibleOk" id="option"  onclick="changeCheckBox();"/>

 yes

        <input type="checkbox" name="option" value="checkedVisibleNok"     id="option" onclick="changeCheckBox();"/>

       no

</form>
<script>
var serNoChecked="";
function changeCheckBox() {
 try {

        var max = document.mainForm.option.length;
        var count = 0;

        for (var i = 0; i < max; i++) {
            if (document.mainForm.option[i].checked == true) {
                count++;
                serNoChecked = i;
            }
        }
        if (count == 1) {
            for (var i = 0; i < max; i++) {
                if (document.mainForm.option[i].checked == false) {
                    document.mainForm.option[i].disabled = true;
                }
            }
        }
        else if (count == 0) {
            for (var i = 0; i < max; i++) {
                document.mainForm.option[i].disabled = false;
            }
        }

        if (null == max) return false;
        if (count == 0) {
            return true;
        }
        else if (count > 0) {
            return false;
        }

    }
    catch (e) {
        alert(e.message);
    }
}
    </script>

Answer 3

Это похоже на работу с переключателями, а не флажками.

Answer 4

Попробуйте использовать переключатели, дайте им одно и то же имя, чтобы сгруппировать их и разрешить выбор только 1:

<td>
    <label for="dock_books_search_visible_online"> Visible online?</label>
</td>
<td>
    <input type="radio" name="option" value="checkedVisibleOk" id="dock_books_visible_ok"  /> 
</td>
<td>
    <label for="dock_books_search_visible_online_yes"> Yes</label>
</td>
<td><input type="radio" name="option" value="checkedVisibleNok" id="dock_books_visible_nok" />
</td>
<td>
    <label for="dock_books_search_visible_online_no"> No</label>
</td>

Проверьте это JSFiddle.

Answer 5

Используйте переключатели и убедитесь, что имя тега соответствует всем параметрам, и он автоматически выберет только одну без необходимости дополнительного кода или JS.

Answer 6

function toggle(chkBox, field) {
    for ( var i = 0; i < field.length; i++) {
        field[i].checked = false;
    }
    chkBox.checked = true;
}


<td>
    <INPUT type="checkbox" name="xyz" onClick="toggle(this,document.myform.xyz);" value="${incident.incidentID}">
</td>

Answer 7

Привет, почему вы используете флажок? Флажки не для той функциональности, которая вам нужна. Радио кнопки - это то, что вы хотите использовать.

 <form>
 <input type="radio" name="sex" value="male" /> Male<br />
 <input type="radio" name="sex" value="female" /> Female
 </form> 

Для получения более подробной информации смотрите здесь