javascript - 一旦其他复选框被选中并根据其值的条件隐藏/显示复选框

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(不能选择两个 ARM 配件)，其想法是不能选择这两个复选框，只能选择一个，所以这就是为什么我需要隐藏其中一个一旦它们被选中，就让它们重新出现。

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

这是我的 fiddle :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 属性(或属性)将文本与相关复选框显式关联。

我在互斥的输入中添加了一个类，以便轻松地使用选择器定位它们，该选择器设置disabled<other 元素(或元素，如果您添加更多互斥复选框)的/code> 属性，具体取决于选中或未选中的元素是选中还是未选中。

顺便说一句，通常最好禁用表单字段，而不是删除/隐藏它们，这样如果用户意外单击，他们就不会想知道其他选项去了哪里，或者在它突然重新出现时感到惊讶。

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

$('.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 .

引用文献:

• add() .
• change() .
• next() .
• not() .
• prop() .