Question

I have to make mutually exculsive checkboxes. I have come across numerous examples that do it giving example of one checkbox group. One example is at http://blog.schuager.com/2008/09/mutually-exclusive-checkboxes-with.html.

In my case, I have many checkbox groups on the same page, so I want it to work like this example. An asp.net codebehind example is here, but I want to do it in client side code.

我如何在 Java山这样做?

i have decided to use the ajax mutually exclusive checkbox extender. The solutions given so far are basically based on radio buttons. This link really helped me..http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-mutuallyexclusive-checkbox-extender

Answer 1

如果有无线电台,则使用相互检查箱是一种坏的想法,但你仍然可以这样做。

HTML

<div>    
    Red: <input id="chkRed" name="chkRed" type="checkbox" value="red" class="checkbox">
    Blue: <input id="chkBlue" name="chkBlue" type="checkbox" value="blue" class="checkbox">
    Green: <input id="chkGreen" name="chkGreen" type="checkbox" value="green" class="checkbox">
</div>

<div>
    Mango: <input id="chkRed" name="chkMango" type="checkbox" value="Mango" class="checkbox">
    Orange: <input id="chkBlue" name="chkOrange" type="checkbox" value="Orange" class="checkbox">
    Banana: <input id="chkGreen" name="chkBanana" type="checkbox" value="Banana" class="checkbox">
</div>

Jquery

$( div .checkbox ).click(function () { 
                 checkedState = $(this).attr( checked );
                  $(this).parent( div ).children( .checkbox:checked ).each(function () {
                      $(this).attr( checked , false);
                  });
                  $(this).attr( checked , checkedState);
});

这里是fiddle。

Answer 2

同我在评论中所说的那样,你应当真正使用<代码><radio>要素。他们用同样的名称,他们的工作方式几乎相同:

<label><input type="radio" name="option" value="Option 1">Option 1</label>
<label><input type="radio" name="option" value="Option 2">Option 2</label>

唯一的重大区别是,一旦选定其中一人,至少其中一人必须到场(因此,你可以再次阻止他们)。

如果你真的认为有必要用检查箱进行,就会提醒慈善社,如果贾瓦语残疾的使用者愿意,他们将能够选择所有选择。如果你still/em>认为有必要这样做,那么,你需要给每个检查箱组一个独特的类别名称。然后,处理每个检查箱子的变更事件,并核对与被点击的同一类别名称相匹配的所有其他要素。

Answer 3

我希望。

A <input type="checkbox" class="alpha" value="A" /> | 
B <input type="checkbox" class="alpha" value="B" /> | 
C <input type="checkbox" class="alpha" value="C" /> 
<br />

1 <input type="checkbox" class="num" value="1" /> |
2 <input type="checkbox" class="num" value="2" /> |
3 <input type="checkbox" class="num" value="3" />

// include jQuery library
var enforeMutualExcludedCheckBox = function(group){
    return function() {
      var isChecked= $(this).prop("checked");
      $(group).prop("checked", false);
      $(this).prop("checked", isChecked);
    }
};

$(".alpha").click(enforeMutualExcludedCheckBox(".alpha"));
$(".num").click(enforeMutualExcludedCheckBox(".num"));

well, radio button should be the one to be used in mutually excluded options, though I ve encountered a scenario where the client preferred to have zero to one selected item, and the javaScript ed checkbox works well.

在我的答复中,我认识到,两度提到弹.类是多余的。我更新了我的法典,将它变成了一种 j花板,并提出了两种解决办法,视其偏好而定。

www.un.org/Depts/DGACM/index_spanish.htm 检查相互排斥的所有检查箱:

$.fn.mutuallyExcludedCheckBoxes = function(){
    var $checkboxes = this; // refers to selected checkboxes

    $checkboxes.click(function() {
      var $this = $(this),
          isChecked = $this.prop("checked");

      $checkboxes.prop("checked", false);
      $this.prop("checked", isChecked);
    });
};

// more elegant, just invoke the plugin
$("[name=alpha]").mutuallyExcludedCheckBoxes();
$("[name=num]").mutuallyExcludedCheckBoxes();

传真

A <input type="checkbox" name="alpha" value="A" /> | 
B <input type="checkbox" name="alpha" value="B" /> | 
C <input type="checkbox" name="alpha" value="C" /> 
<br />

1 <input type="checkbox" name="num" value="1" /> |
2 <input type="checkbox" name="num" value="2" /> |
3 <input type="checkbox" name="num" value="3" />

rel=“noretinger”>sample代码

www.un.org/Depts/DGACM/index_spanish.htm 包含内容的所有相互排斥的检查箱

Java

$.fn.mutuallyExcludedCheckBoxes = function(){
    var $checkboxes = this.find("input[type=checkbox]");

    $checkboxes.click(function() {
      var $this = $(this),
          isChecked = $this.prop("checked");

      $checkboxes.prop("checked", false);
      $this.prop("checked", isChecked);
    });
};

// select the containing element, then trigger the plugin 
// to set all checkboxes in the containing element mutually 
// excluded
$(".alpha").mutuallyExcludedCheckBoxes();
$(".num").mutuallyExcludedCheckBoxes();

传真

<div class="alpha">
A <input type="checkbox" value="A" /> | 
B <input type="checkbox" value="B" /> | 
C <input type="checkbox" value="C" /> 
</div>

<div class="num">
1 <input type="checkbox" value="1" /> |
2 <input type="checkbox" value="2" /> |
3 <input type="checkbox" value="3" /> 
</div>

rel=“noreferer”>sample代码

欢乐:-

Answer 4

为此:

传真

<div>
    Car: <input id="chkVehicleCar" name="chkVehicle" type="checkbox" value="Car" class="radiocheckbox">
    Moto: <input id="chkVehicleMoto" name="chkVehicle" type="checkbox" value="Moto" class="radiocheckbox">
    Byke: <input id="chkVehicleByke" name="chkVehicle" type="checkbox" value="Byke" class="radiocheckbox">
    Feet: <input id="chkVehicleFeet" name="chkVehicle" type="checkbox" value="Feet">
</div>

<span>    
    Red: <input id="chkColorRed" name="chkColor" type="checkbox" value="Red" class="radiocheckbox">
    Blue: <input id="chkColorBlue" name="chkColor" type="checkbox" value="Blue" class="radiocheckbox">
    Green: <input id="chkColorGreen" name="chkColor" type="checkbox" value="Green" class="radiocheckbox">

    Mango: <input id="chkFruitMango" name="chkFruit" type="checkbox" value="Mango" class="radiocheckbox">
    Orange: <input id="chkFruitOrange" name="chkFruit" type="checkbox" value="Orange" class="radiocheckbox">
    Banana: <input id="chkFruitBanana" name="chkFruit" type="checkbox" value="Banana" class="radiocheckbox">
</span>

Javacast/jQuery

$( :checkbox.radiocheckbox ).click(function() {
    this.checked
        && $(this).siblings( input[name="  + this.name +  "]:checked.  + this.className)
                  .prop( checked , false);
});

Mutually exclusive checkboxes are grouped by container+name+classname. You can use different groups in same container and also mix exclusive with non-exclusive checkbox with same name. JavaScript code is highly optimized. You can see a working example.

Answer 5

不管检查箱位于你的网页上,你只需要说明这个组别,在这里,你们会走!

    <input type= checkbox  data-group= orderState > pending
    <input type= checkbox  data-group= orderState > solved
    <input type= checkbox  data-group= orderState > timed out

    <input type= checkbox  data-group= sex > male
    <input type= checkbox  data-group= sex > female

    <input type= checkbox > Isolated


    <script>
       $(document).ready(function () {
          $( input[type=checkbox] ).click(function () {
            var state = $(this)[0].checked, 
                g = $(this).data( group );
             $(this).siblings()
             .each(function () {
     $(this)[0].checked = g==$(this).data( group )&&state ? false : $(this)[0].checked;
             });
  });
 })</script>

Answer 6

我认为这是你想要的。

考虑如下文:

<form action="">
    My favourite colors are:<br />
    <br />
    <input type="checkbox" value="red" name="color" /> Red<br />
    <input type="checkbox" value="yellow" name="color" /> Yellow<br />
    <input type="checkbox" value="blue" name="color" /> Blue<br />
    <input type="checkbox" value="orange" name="color1" /> Orange<br />
    <input type="checkbox" value="green" name="color1" /> Green<br />
    <input type="checkbox" value="purple" name="color1" /> Purple
</form>

注:彩色组有两种名称:red, 黄,蓝色和orage, Green, purple

以下所述 Java本将通用地与网页上的所有<代码>check Box/code>。

jQuery("input[type=checkbox]").unbind("click");
jQuery("input[type=checkbox]").each(function(index, value) {
    var checkbox = jQuery(value);
    checkbox.bind("click", function () {
        var check = checkbox.attr("checked");
        jQuery("input[name=" + checkbox.attr( name ) + "]").prop("checked", false);
        checkbox.attr("checked", check);
    });
});

http://jsfiddle.net/xucAY/“rel=“nofollow” 缩略语

友情链接