如何使用 jquery 显示或隐藏 div 或表单元素？

How to show or hide div or form element with jquery?

提问by MahiloDai

I am trying to show or hide fieldset based on the answer selected on YES/NO radio button. I have multiple form elements that has to be shown or hidden based on their corresponding YES/NO radio button. But the code below is not working for me. Could someone help me to correct this problem?

我试图根据是/否单选按钮上选择的答案显示或隐藏字段集。我有多个表单元素必须根据它们相应的“是/否”单选按钮显示或隐藏。但是下面的代码对我不起作用。有人可以帮我纠正这个问题吗？

<!-- My Form Element  -->

<form>
<fieldset id="question">
  <legend>This is my question</legend>
  <label for="answerYes">Yes</label>
  <input name="answer" class="myradio" type="radio" value="1" />
  <label for="answerNo">No</label>
  <input name="answer" class="myradio" type="radio" value="0" />
</fieldset>

<fieldset class="subQuestion">
  <legend>This is my question</legend>
  <label for="answerYes">Yes</label>
  <input name="answer" class="subradio" type="radio" value="1" />
  <label for="answerNo">No</label>
  <input name="answer" class="subradio" type="radio" value="0" />
</fieldset>

</form>


// Jquery to show or hide subQuestion

$(document).ready(function(){
  // do your checks of the radio buttons here and show/hide what you want to
  $(".subQuestion").hide();

  $(document).on('click', '.myradio' , function() {
         if ($(this.value).length > 0){ 
            $(".subQuestion").show();           
         }
         else {
            $(".subQuestion").hide();           
         }       
    })

});

回答by Arun P Johny

You are checking the length of the value property, which is 1(because they have valeus 00 and 1) in both the cases, you need to check the value is greater than 0

您正在检查 value 属性的长度，在这两种情况下1（因为它们都有00 和1），您需要检查该值是否大于0

$(document).ready(function(){
  // do your checks of the radio buttons here and show/hide what you want to
  $(".subQuestion").hide();

  $(document).on('click', '.myradio' , function() {
         if (this.value > 0){ 
            $(".subQuestion").show();           
         }
         else {
            $(".subQuestion").hide();           
         }       
    })

});

Demo: Fiddle

演示：小提琴

回答by Vuthy Sok

Try this

尝试这个

$(document).ready(function(){

    $(".subQuestion").hide();

     $('#question input[type="radio"]').click(function(){
        if (this.value == 1){ 
            $(".subQuestion").show();           
        } else {
            $(".subQuestion").hide();           
        }       
    })

});

回答by S. S. Rawat

Try this, this is helpful for you. In your code problem in $(this.value).length > 0)this line, this is syntax error, difficult to match the value of radio button which is clicked.

试试吧this，这对你有帮助。在$(this.value).length > 0)这一行的代码问题中，这是语法错误，难以匹配单击的单选按钮的值。

$(".subQuestion").hide();
  $('input[type=radio]').change(function() {
         if ($(this).val()== 0){ 
            $(".subQuestion").show();           
         }
         else {
            $(".subQuestion").hide();           
         }       
  });

回答by bipen

you don't need $in front, to use this.value... and check for value itself and not its length...

你不需要$在前面，使用this.value......并检查值本身而不是它的长度......

this

这个

if ($(this.value).length > 0){ 

?should be

？应该

if (this.value > 0){ //using DOM check if value is greter than 0

or

或者

if ($(this).val()> 0){  //using jquery

so your final code should be

所以你的最终代码应该是

$(document).ready(function(){
// do your checks of the radio buttons here and show/hide what you want to
$(".subQuestion").hide();

 $(document).on('click', '.myradio' , function() {
     if (this.value > 0){ 
        $(".subQuestion").show();           
     }
     else {
        $(".subQuestion").hide();           
     }       
  })

});

回答by Dinesh

Try this

尝试这个

$(document).ready(function(){

  $(".subQuestion").hide();

  $(document).on('click', '.myradio' , function() {
         if (this.value == 0){ 
            $(".subQuestion").hide();          
         }
         else {
            $(".subQuestion").show();           
         }       
    })

});