Question

当我检查其中一个时，我试图隐藏一组复选框，并在未选中后重新显示它们。条件必须基于其值。

var input = document.getElementsByTagName("input");

for(i=0;i<input.length;i++){


input[i].onchange = function(){
    if(this.checked){
var value = $(this).val();
$("input[type=checkbox]:not(." + '60' + ")").hide();
$("input[type=checkbox]." + '60').show();
}
  }
     }

要隐藏的复选框组属于值60和90（无法选择两个武器配件），这个想法是两个复选框无法选择，只有一个，所以这就是为什么我们需要在检查后隐藏其中一个，并在取消选中后重新显示它们。

        <input type="checkbox" value="50" /> conductive plastic foot cup $50<br/>
        <input type="checkbox" value="60" /> <a>T-arms 2 $60</a><br/>
        <input type="checkbox" value="90" /> <a>T-arms 1 $90</a><br/>
        <input type="checkbox" value="80" /> metal rails $80<br/>
        <input type="checkbox" value="30" /> plastic rails $30<br/>
        <input type="checkbox" value="70" /> foot rest ring $70<br/>
        <input type="checkbox" value="120" />plastic five star foot $120 <br/>

这是我的小提琴：JS fiddle

Answer 1

我建议使用以下jQuery：

$('.arms').change(
    function(){
        $('.arms').not(this).prop('disabled',this.checked);
    });

加上修改后的HTML：

<input id="check1" type="checkbox" value="50" />
<label for="check1">conductive plastic foot cup $50</label>
<input id="check2" type="checkbox" value="60" class="arms" />
<label for="check2">T-arms 2 $60</label>
<input id="check3" type="checkbox" value="90" class="arms" />
<label for="check3">T-arms 1 $90</label>
<input id="check4" type="checkbox" value="80" />
<label for="check4">metal rails $80</label>
<input id="check5" type="checkbox" value="30" />
<label for="check5">plastic rails $30</label>
<input id="check6" type="checkbox" value="70" />
<label for="check6">foot rest ring $70</label>
<input id="check7" type="checkbox" value="120" />
<label for="check7">plastic five star foot $120</label>

JS Fiddle demo

以上内容使用label元素，for属性（或属性）将文本与相关checkbox明确关联。

我已将class添加到互相排斥的input，以便使用选择器轻松定位它们，该选择器设置的disabled属性其他元素（如果添加更多互斥checkboxes，则为元素），具体取决于是选中还是取消选中已选中或未选中的元素。

顺便说一下，通常最好禁用表单字段，而不是删除/隐藏表单字段，如果用户意外点击，他们就不会想知道其他选项的去向，或者突然重新出现时会感到惊讶。 / p>

但是，如果您确实想要显示/隐藏“其他”元素，那么您可以使用以下内容：

$('.arms').change(
    function(){
        $('.arms').not(this).add($(this).next())[this.checked ? 'hide' : 'show']();
    });

JS Fiddle demo

或者你甚至可以使用第一种方法（使用prop('disabled',this.checked)）和以下CSS（在兼容的浏览器中实现:disabled伪选择器：

input:disabled,
input:disabled + label {
    display: none;
}

JS Fiddle demo

参考文献：

Answer 2

我喜欢将data属性用于此类内容：

HTML

<input type="checkbox" value="50" /> conductive plastic foot cup $50<br/>
<input type="checkbox" value="60" data-exclude="input[value=90]" /> T-arms 2 $60<br/>
<input type="checkbox" value="90" data-exclude="input[value=60]" /> T-arms 1 $90<br/>
<input type="checkbox" value="80" /> metal rails $80<br/>
<input type="checkbox" value="30" /> plastic rails $30<br/>
<input type="checkbox" value="70" /> foot rest ring $70<br/>
<input type="checkbox" value="120" />plastic five star foot $120 <br/>

的JavaScript

var input = document.getElementsByTagName("input");

$('input').each(function() {
    var $input = $(this);
    $input.change(function() {
        var $exclude = $($input.data('exclude'));
        $exclude.toggle(! $input.is(':checked'));
    });
});

现场演示

http://jsfiddle.net/bikeshedder/2H5kB/10/

顺便说一句。我宁愿禁用复选框而不是隐藏它。

隐藏/显示复选框一旦选中其复选框，其值为条件

2 个答案:

HTML

的JavaScript

现场演示