如何根据单选按钮值显示/隐藏div?

时间:2016-05-03 05:31:45

标签: jquery html

我有一个带有六个单选按钮块的表单。

当用户选择option no for 3 or more times时,我必须在输入提交按钮时显示Text 1Text 2 div。

以下是我的代码,

<form>
    <fieldset>  
    <div class="input-radio">  
      <input type="radio" value="yes" name="somename"/>  
      <input type="radio" value="no" name="somename"/>  
    </div>
    <!-- 6 identical blocks -->
    </fieldset>

    <div class="submit">
      <span>Submit</span>
    </div>      

    <div class="text-1">
    Text 1
    </div> 
    <div class="text-2">
      Text 2
    </div>
</form> 

1 个答案:

答案 0 :(得分:0)

我尝试过这样的事情:

HTML:

<input type="radio" value="yes" class="chkbx" name="somename"/>  
<input type="radio" value="no" class="chkbx" name="somename"/> 
<input type="radio" value="yes" class="chkbx" name="somename1"/>  
<input type="radio" value="no" class="chkbx" name="somename1"/> 
<input type="radio" value="yes" class="chkbx" name="somename2"/>  
<input type="radio" value="no" class="chkbx" name="somename2"/> 
<input type="button" id="button"  />

使用Javascript:

<script>

    $(document).ready(function(){
        $("#button").on("click", function(){
            if($("input.chkbx:checked[value='no']").length == 3)
                $("#button").text("text1");
            else
                $("#button").text("text2");
        })
    })
</script>