make checkbox behave like radio buttons with javascript

前端未结

关注

 11  712

I need to manipulate the behavior of the check boxes with javascript. They should basically behave like radio buttons (only one selectable at a time, plus unselect any previ

相关标签:

11条回答

孤独总比滥情好

2020-11-28 07:18

Just in case it helps someone else

I was having the same situation where my client needed to have a checkbox behaving like a radio button. But to me it was meaningless to use a checkbox and make it act like radio button and it was very complex for me as I was using so many checkboxes in a GridView Control.

My Solution:
So, I styled a radio button look like a checkbox and took the help of grouping of radio buttons.

0 讨论(0)
发布评论:

提交评论
- 加载中...

悲哀的现实

2020-11-28 07:21

<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>

Ultimately you can use brackets with the name attribute to create an array of radio input like so:

<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

What matters to transfer in the end are whats in the value attribute. Your names do not have to be different at all for each radio button. Hope that helps.

0 讨论(0)

深忆病人

2020-11-28 07:23

I like D.A.V.O.O.D's Answer to this question, but it relies on classes on the checkbox, which should not be needed.

As checkboxes tend to be related in that they will have the same (field) name, or a name which make them part of an array, then using that to decide which other checkboxes to untick would be a better solution.

$(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);
  });

This code on jsFiddle

0 讨论(0)

甜味超标

2020-11-28 07:25

In Simple JS. Enjoy !

<!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>

0 讨论(0)

天涯浪人

2020-11-28 07:28

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);
});

if you want user can unchecked selected item :

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

Demo :

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

0 讨论(0)

上一页 1 2