javascript从按钮操作2个复选框

时间:2015-10-12 12:10:45

标签: javascript html dom

我有一个名为Rework的按钮,当我点击按钮时,必须出现两个复选框,并且Rework按钮应该消失,并且必须出现提交按钮。我将如何继续这个概念。

4 个答案:

答案 0 :(得分:0)

你可以这样做:http://codepen.io/anon/pen/pjrwLe

**HTML**
<input type="button" id="rework-button" value="Rework" onclick="rework()"/>

<div id="checkboxes">
  Check A: <input type="checkbox" />
  Check B: <input type="checkbox" id="check-a" />
</div>


<input type="submit" id="submit-button" value="Submit"/>

**CSS**
#checkboxes,
#submit-button{
  display:none;
}

**JAVASCRIPT**
function rework(){
  document.getElementById("checkboxes").style.display = "block"
  document.getElementById("submit-button").style.display = "block"
  document.getElementById("rework-button").style.display = "none"

}

答案 1 :(得分:0)

理解这一点并根据需要进行编辑:

<div class='checkbx' style="display:none;">
    <!--here goes your checkboxes-->
    </div>
    <input type='button' class'button1'/>
    <input type='submit' class'button2'/>
    <script>
    $('.button1').click(function(){
      $('.checkbx').show();
      $('.button2').show();
      $('.button1').hide();

     });
   </script>

这是jquery ..学习Jquery好的。 代码更少

注意:不要忘记包含jquery文件...阅读jquery

答案 2 :(得分:0)

您可以尝试这样的操作,点击返工时,如果它没有显示为无,则显示复选框并提交按钮。

function reworkClick() {
    if (document.getElementById("Rework").style.display != "none"){
        document.getElementById("Rework").style.display = "none";
        document.getElementById("Submit").style.display = "block";
        document.getElementById("checkboxContainer").style.display = "block";
    }
}

答案 3 :(得分:0)

试试这个

<div class="input_box">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car"> I have a car<br>
  <input type="submit" value="Submit">
</div>
<div class="button"> 
  <input type="button" class="Rework" value="Rework">
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('.input_box').hide();
        $('.Rework').click(function(){
            $('.button').hide();
            $('.input_box').show();

        });

    });
</script>

希望这有帮助!