【问题标题】:Check box that unchecks all othes [duplicate]取消选中所有其他的复选框[重复]
【发布时间】:2014-04-29 09:09:30
【问题描述】:

在一个表单中,我有一个字段集,其中有几个复选框。该系列中的最后一个复选框将被标记为“无”,选中后将取消选中所有其他选项。当重新单击其中一个选项时,此时应取消选中“无”框。我真的一直坚持如何做到这一点。这是我的 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>

【问题讨论】:

标签: javascript jquery html forms checkbox


【解决方案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/

【讨论】:

    【解决方案2】:

    试试这段代码

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

    http://jsfiddle.net/gHwgh/

    【讨论】:

    • 感谢您的建议。我有正确的代码
    • 点击我取消选中除它本身之外的所有输入。有 id != 不相等。看看它的工作原理。你的评论是正确的,因为 if 语句是不必要的
    • 对不起,我在手机上看到了这个 - 但是你应该限制为复选框 - 可能只有 name^='chk"
    猜你喜欢
    • 1970-01-01
    • 2013-01-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-29
    • 2020-08-12
    相关资源
    最近更新 更多