在复选框上显示框或输入框 [英] Show box or input box on checked box

问题描述

如何使这项工作...

如果我选择一个框，它会显示我的输入框或任何我需要显示的时候选中一个框。 。问题是我有5个复选框...

所以如果用户选择

  Box 1 [x] 
 Box 2 [x] 
 Box 3 [x] 
 box 4 [x] 
 Box 5 [] 
 

到这一点代码工作正常...但是，然后他/她意识到，不再需要盒子3并希望在切换提交按钮之前切换3为5 ...

  Box 1 [x] 
 Box 2 [x] 
 Box 3 [] 
 box 4 [x] 
 Box 5 [x] 
  

当发生这种情况时，输入框从显示改为隐藏...我不想那样，因为1,2,4和5仍然选择...

如果没有选择，那么确定没有显示任何东西...但只要有一个选择，输入框或按钮或文本或任何所需的必须显示...

以下是测试代码：

HTML

 < input type =checkboxname =providedid =providedvalue =providedclass =aboveage2/> 
< input type =checkboxname =providedid =provided_1value =suppliedclass =aboveage2/> 
< input type =checkboxname =providedid =provided_2value =suppliedclass =aboveage2/> 
< input type =checkboxname =providedid =provided_3value =suppliedclass =aboveage2/> 
< input type =checkboxname =providedid =provided_4value =suppliedclass =aboveage2/> 
< input type =checkboxname =providedid =provided_5value =suppliedclass =aboveage2/> 
 
< ul id =datestyle =display：none> 
< li>< input id =startname =startsize =5type =textclass =smallvalue =1/>< / li> 
< li>< li>< input id =endname =endsize =5type =textclass =smallvalue =2/>< / li> 
< / ul> 
   

Java

  $（'＃provided，＃provided_1，＃provided_2，＃supplied_3，＃provided_4，＃provided_5'）。live（'change'，function（）{
 if （$（this）.is（'：checked'））{
 $（'＃date'）。show（）; 
} else {
 $（'＃date'）。 hide（）; 
} 
}）; 
  

链接到生活测试：
http://jsfiddle.net/GBSZ8/284/

谢谢。 >

解决方案

  $（'.aboveage2'）。live（'change'，function b 
 $ b if（$（。aboveage2：checked）。length> 0）{
 $（'＃date'）。show（）; 
} else {
 $（'＃date'）。hide（）; 
} 
}）; 
  

演示： http://jsfiddle.net/samliew/GBSZ8/295/

请注意， live 仅适用于jQuery 1.7或更低版​​本。要迁移到最新的jQuery，请参阅 jQuery 1.9 .live ）不是函数

---

UPDATE：
$ b

您的网站上的复选框类别与问题中的复选框类别不同。

选择器代替：

  $（'input [name * = accessory_id]'）。live（'change'，function 
 
 if（$（input [name * = accessory_id]：checked）。length> 0）{
 $（'＃date'）。show（）; 
} else {
 $（'＃date'）。hide（）; 
} 
}）; 
  

how can I make this work...

If I select a box it shows my input box or whatever I need to show when a box is checked ... the problem is that I have 5 check box...

so If the user select

Box 1 [x]
Box 2 [x]
Box 3 [x]
box 4 [x]
Box 5 [ ]

up to this point the code works fine... but then he/she realize that no longer want the Box 3 and want to switch 3 for 5 ... before clic the submit button

Box 1 [x]
Box 2 [x]
Box 3 [ ]
box 4 [x]
Box 5 [x]

When that happen the input box change from show to hide... and I don't want that since 1,2,4 and 5 still selected ...

If there where no one selected then sure show nothing... but as long as there is one selected then the input box or button or text or whatever is needed must be shown...

Here is the code for testing:

The HTML

  <input type="checkbox" name="supplied" id="supplied" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_1" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_2" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_3" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_4" value="supplied" class="aboveage2" />
  <input type="checkbox" name="supplied" id="supplied_5" value="supplied" class="aboveage2" />

<ul id="date" style="display:none">
    <li><input id="start" name="start" size="5" type="text" class="small" value="1" /></li>
    <li><input id="end" name="end" size="5" type="text" class="small" value="2" /></li>
</ul>

The Java

  $('#supplied, #supplied_1, #supplied_2, #supplied_3, #supplied_4, #supplied_5').live('change', function(){
      if ( $(this).is(':checked') ) {
         $('#date').show();
     } else {
         $('#date').hide();
     }
 });

The link to live test: http://jsfiddle.net/GBSZ8/284/

Thank you.

解决方案

$('.aboveage2').live('change', function() {

    if ( $(".aboveage2:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

Demo: http://jsfiddle.net/samliew/GBSZ8/295/

Note that live works only for jQuery 1.7 or lower. For migration to latest jQuery, see jQuery 1.9 .live() is not a function

---

UPDATE:

Your checkbox class on your website is different from the one in the question!!!

Use this selector instead:

$('input[name*=accessory_id]').live('change', function() {

    if ( $("input[name*=accessory_id]:checked").length > 0 ) {
        $('#date').show();
    } else {
        $('#date').hide();
    }
});

这篇关于在复选框上显示框或输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！