复选框取消选中所有其他复选框

时间:2014-03-21 19:51:38

标签: javascript jquery html forms checkbox

在一个表单中,我有一个字段集,其中我有一些复选框。系列中的最后一个复选框将标记为" none"并且当被选中时将取消选中所有其他选项。当重新点击其中一个选项时,应取消选中“无”选项。那个时候的盒子。我一直坚持如何做到这一点。这是我的HTML

</fieldset>
<fieldset class="checkboxx">
<legend>What Extreme Sports Do You You Play?(check all that apply):</legend>

    <label><input type="checkbox" id="chkSkateboarding" name="chkSkateboarding" 
                  <?php if($Skateboarding) echo ' checked="checked" ';?>
                  value="Skateboarding" tabindex="250"> Skateboarding</label>

<label><input type="checkbox" id="chkPaintball" name="chkPaintball" 
                  <?php if($Paintball) echo ' checked="checked" ';?>
                  value="Paintball" tabindex="260"> Paintball</label>

    <label><input type="checkbox" id="chkSnowboarding" name="chkSnowboarding"
                  <?php if($Paintball) echo ' checked="checked" ';?>
                  value="Snowboarding" tabindex="270"> Snowboarding</label>

    <label><input type="checkbox" id="chkMountainBiking" name="chkMountainBiking"
                  <?php if($MountainBiking) echo ' checked="checked" ';?>
                  value="MountainBiking" tabindex="280"> Mountain Biking</label>

    <label><input type="checkbox" id="chkWakeboarding" name="chkWakeboarding"
                  <?php if($Wakeboarding) echo ' checked="checked" ';?>
                  value="Wakeboarding" tabindex="285"> Wakeboarding</label>

    <label><input type="checkbox" id="chkRockClimbing" name="chkRockClimbing"
                  <?php if($RockClimbing) echo ' checked="checked" ';?>
                  value="RockClimbing" tabindex="290"> Rock Climbing</label>

    <label><input type="checkbox" id="chkNone" name="chkNone"
                  <?php if($None) echo ' checked="checked" ';?>
                  value="None" tabindex="291"> None</label>

</fieldset>

2 个答案:

答案 0 :(得分:1)

该技术应该简单如下:

1-我们应该在选中任何其他复选框时取消选中(无)复选框。

var allOtherCheckboxes = $("input:checkbox:not(#chkNone)");

    // uncheck the (none) checkbox when any other checkbox is selected
    allOtherCheckboxes.change(function(){
    $("#chkNone").prop('checked', false);
    });

2-对于(无)复选框,我们应该取消选中所有其他复选框。

$("#chkNone").change(function(){
        var noneStatus = $(this).prop("checked");
        if(noneStatus === true)
        {
            // remove the checked state from other checkboxes in the page
            allOtherCheckboxes.each(function(el){
                //alert("found");
                $(this).prop('checked', false);
            });
        }
    });

我为你创造了这个小提琴,其中包含您正在寻找的内容:http://jsfiddle.net/hakeero/p9bCD/2/

答案 1 :(得分:0)

尝试使用此代码

$("#chkNone").click(function(){
       $( "input[id!='chkNone']" ).prop('checked', false);    
})

$("input[type='checkbox'][id!='chkNone']").click(function(){    
        $( "#chkNone" ).prop('checked', false);    
})

http://jsfiddle.net/gHwgh/