Question

我正在开发动态网站，其中多个复选框包含唯一ID ，

我想要的是，如果选中任何复选框，则会显示新的<div>到＆amp;如果取消选中所有复选框，则会消失。

javascripts的新手，需要你的帮助。

感谢

Answer 1

建议学习Jquery

http://jquery.org/

你可以把像chekboxid1，checkboxid2 ......这样的提升id。

并检查是否都要检查：

$('[id^=checkboxid]').live('click', function(){
var total = {insert the sum of checkbox}
    if($("[id^=checkboxid]:checked").length == total){
    // do something
}
});

知道所有未选中的内容是否比较长度0而不是总数。

另一个更详细的链接：

http://charlie.griefer.com/blog/index.cfm/2009/8/14/jQuery--Accessing-Checked-Checkboxes

Answer 2

<style>
 #appear_div {
     display: none;
 }
</style>

<script type="text/javascript">
 function doInputs(obj){
 var checkboxs = $("input[type=checkbox]:checked"); 
 var i =0, box;
 $('#appear_div').fadeOut('fast');
     while(box = checkboxs[i++]){
     if(!box.checked)continue;
     $('#appear_div').fadeIn('fast');
     break;
     }
 }
 </script>

 <form>
 <input type="checkbox" name="c1" onclick="doInputs(this)">
 <input type="checkbox" name="c1" onclick="doInputs(this)">
 <input type="checkbox" name="c1" onclick="doInputs(this)">
 <input type="checkbox" name="c1" onclick="doInputs(this)">
 <input type="checkbox" name="c1" onclick="doInputs(this)">
 </form>
 <div id="appear_div">
 <input type="text">
 </div>

这对我有用。

由于

Answer 3

我最近不得不使用jQuery做类似的事情。

首先隐藏区域onload以便用户看不到它

 <style>
     #div2appear{
         display: none;
     }
 </style>

然后是表单元素

 <form id="AllTheseFields">
   <input type="checkbox" name="c1" />
   <input type="checkbox" name="c1" />
   <input type="checkbox" name="c1" />
   <input type="checkbox" name="c1" />
   <input type="checkbox" name="c1" />
   <div id="div2appear">
     <input type="text" />
   </div>
 </form>

和jQuery

 <script type="text/javascript">
    $('#AllTheseFields>input[type=checkbox]').change(
       function(){
           if($('#AllTheseFields>input[type=checkbox]').is(':checked')){
                  // if any of the checkboxes are checked then make the area visible
                  $('#div2appear').show(); 
           }else{
                  // only if all are unchecked will this fire and hide the area
                  $('#div2appear').hide();
           }
       }
    );
 </script>

如果选中任何复选框，则显示div！

3 个答案: