Make checkbox ведут себя как переключатели с javascript

Мне нужно манипулировать поведением флажков с помощью JavaScript. Они должны в основном вести себя как переключатели (только одна выбирается за раз плюс отменять любые предыдущие варианты).

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

Я знаю, что это не самое лучшее и блестящее решение, чтобы сделать яблоко похожим на грушу, и w3c не дал бы мне его за это, но сейчас это было бы лучшим решением, чем менять основную логику php вся структура cms ;-)

Любая помощь высоко ценится!

ОТВЕТЫ

Ответ 1

HTML:

<label><input type="checkbox" name="cb1" class="chb" /> CheckBox1</label>
<label><input type="checkbox" name="cb2" class="chb" /> CheckBox2</label>
<label><input type="checkbox" name="cb3" class="chb" /> CheckBox3</label>
<label><input type="checkbox" name="cb4" class="chb" /> CheckBox4</label>

jQuery:

$(".chb").change(function() {
    $(".chb").prop('checked', false);
    $(this).prop('checked', true);
});

если вы хотите, чтобы пользователь мог снять отметку с выбранного элемента:

$(".chb").change(function() {
    $(".chb").not(this).prop('checked', false);
});

Демо:

http://jsfiddle.net/44Zfv/724/

Ответ 2

Есть много способов сделать это. Это клик-манипулятор (простой js) для div, содержащий несколько флажков:

function cbclick(e){
   e = e || event;
   var cb = e.srcElement || e.target;
   if (cb.type !== 'checkbox') {return true;}
   var cbxs = document.getElementById('radiocb')
               .getElementsByTagName('input'), 
       i    = cbxs.length;
    while(i--) {
        if (cbxs[i].type 
             && cbxs[i].type == 'checkbox' 
             && cbxs[i].id !== cb.id) {
          cbxs[i].checked = false;
        }
    }
}

Здесь рабочий пример.

Ответ 3

Это лучший вариант, поскольку он также позволяет снять флажок:

$(".cb").change(function () {
    $(".cb").not(this).prop('checked', false);
});

Ответ 4

Я держал это просто...

<html>
<body>

<script>
function chbx(obj)
{
var that = obj;
   if(document.getElementById(that.id).checked == true) {
      document.getElementById('id1').checked = false;
      document.getElementById('id2').checked = false;
      document.getElementById('id3').checked = false;
      document.getElementById(that.id).checked = true;
   }
}
</script>

<form action="your action" method="post">

<Input id='id1' type='Checkbox' Name ='name1' value ="S" onclick="chbx(this)"><br />
<Input id='id2' type='Checkbox' Name ='name2' value ="S" onclick="chbx(this)"><br />
<Input id='id3' type='Checkbox' Name ='name3' value ="S" onclick="chbx(this)"><br />

<input type="submit" value="Submit" />
</form>

</body>
</html>

Ответ 5

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

function clickReset ()
{
    var isChecked = false,
        clicked = $(this),
        set = $('.' + clicked.attr ('class') + ':checked').not (clicked);

    if (isChecked = clicked.attr ('checked'))
    {
        set.attr ('checked', false);
    }
    return true;
}

$(function ()
{
    $('.test').click (clickReset);
});

Примечание: Это довольно меня, просто снимая с бедра, я не тестировал это, и мне может потребоваться настройка на работу.

Я бы посоветовал вам найти способ сделать это с помощью радиокнопки, если сможете, поскольку радиоприемники являются подходящим инструментом для работы. Пользователи ожидают, что флажки будут вести себя как флажки, а не радиоприемники, и если они отключат javascript, они могут принудительно выполнить вход на стороне сервера script, чего вы не ожидали.

РЕДАКТИРОВАТЬ: Исправлена ​​функция, чтобы снять флажок, и добавлена ​​ссылка JS Fiddle.

http://jsfiddle.net/j53gd/1/

Ответ 6

На всякий случай, если это поможет кому-то еще

У меня была такая же ситуация, когда мой клиент должен был иметь checkbox, ведущий себя как radio button. Но для меня было бессмысленно использовать checkbox и заставить его действовать как radio button, и это было очень сложно для меня, поскольку я использовал так много checkboxes в элементе управления GridView.

Мое решение:
Итак,я разработал radio button, похожий на checkbox, и воспользовался grouping переключателями.

Ответ 7

<html>
<body>

<form action="#" method="post">
Radio 1: <input type="radio" name="radioMark" value="radio 1" /><br />
Radio 2: <input type="radio" name="radioMark" value="radio 2" /><br />
<input type="submit" value="Submit" />
</form>

</body>
</html>

В конечном итоге вы можете использовать скобки с атрибутом name для создания массива радиовхода, например: 

<input type="radio" name="radioMark[]" value="radio1" />Radio 1
<input type="radio" name="radioMark[]" value="radio2" />Radio 2
<input type="radio" name="radioMark[]" value="radio3" />Radio 3
<input type="radio" name="radioMark[]" value="radio4" />Radio 4

В конечном итоге важно передать в атрибуте value. Для каждого переключателя ваши имена не должны быть разными. Надеюсь, что это поможет.

Ответ 8

В Simple JS. Наслаждайтесь!

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
        function onChoiceChange(obj) {
            // Get Objects
            var that=obj,
                triggerChoice = document.getElementById(that.id),
                domChoice1 = document.getElementById("Choice1"),
                domChoice2 = document.getElementById("Choice2");
            // Apply
            if (triggerChoice.checked && triggerChoice.id === "Choice1") 
                domChoice2.checked=false;
            if (triggerChoice.checked && triggerChoice.id === "Choice2") 
                domChoice1.checked=false;
            // Logout
            var log = document.getElementById("message");
            log.innerHTML += "<br>"+ (domChoice1.checked ? "1" : "0") + ":" + (domChoice2.checked ? "1" : "0");
            // Return !
            return that.checked;
        }
    </script>
</head>
<body>
    <h1 id="title">Title</h1>
    <label><input type="checkbox" onclick="onChoiceChange(this)" id="Choice1" />Choice #1</label> 
    <label><input type="checkbox" onclick="onChoiceChange(this)" id="Choice2" />Choice #2</label>
    <hr>
    <div id="message"></div>
</body>
</html>

Ответ 9

попробуйте это

<form id="form" action="#">
            <input name="checkbox1" type="checkbox" />
            <input name="checkbox2" type="checkbox" />
            <input name="checkbox3" type="checkbox" />
            <input name="checkbox4" type="checkbox" />
            <input name="checkbox5" type="checkbox" />
            <input name="checkbox6" type="checkbox" />
            <input name="checkbox7" type="checkbox" />
            <input name="checkbox8" type="checkbox" />
            <input name="checkbox9" type="checkbox" />
            <input name="checkbox10" type="checkbox" />
            <input type="submit" name="submit" value="submit"/>
        </form>

и это javascript

(function () {
    function checkLikeRadio(tag) {
        var form = document.getElementById(tag);//selecting the form ID 
        var checkboxList = form.getElementsByTagName("input");//selecting all checkbox of that form who will behave like radio button
        for (var i = 0; i < checkboxList.length; i++) {//loop thorough every checkbox and set there value false. 
            if (checkboxList[i].type == "checkbox") {
                checkboxList[i].checked = false;
            }
            checkboxList[i].onclick = function () {
                checkLikeRadio(tag);//recursively calling the same function again to uncheck all checkbox
                checkBoxName(this);// passing the location of selected checkbox to another function. 
            };
        }
    }

    function checkBoxName(id) {
        return id.checked = true;// selecting the selected checkbox and maiking its value true; 
    }
    window.onload = function () {
        checkLikeRadio("form");
    };
})();

Ответ 10

Мне нравится D.A.V.O.O.D Отвечайте на этот вопрос, но он полагается на классы на флажке, который не нужен.

Поскольку флажки имеют отношение к тому, что они будут иметь одинаковое имя (поле) или имя, которое делает их частью массива, а затем использовать это, чтобы решить, какие другие флажки для исправления будут лучшим решением.

$(document)
  .on('change','input[type="checkbox"]',function(e){
    var $t = $(this);
    var $form = $t.closest('form');
    var name = $t.attr('name');
    var selector = 'input[type="checkbox"]';
    var m = (new RegExp('^(.+)\\[([^\\]]+)\\]$')).exec( name );
    if( m ){
      selector += '[name^="'+m[1]+'["][name$="]"]';
    }else{
      selector += '[name="'+name+'"]';
    }
    $(selector, $form).not($t).prop('checked',false);
  });

Этот код в jsFiddle