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

Question

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

<!-- 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();           
         }       
    })

});

Answer 1

您正在检查 value 属性的长度，在这两种情况下1（因为它们都有 valeus 00 和1），您需要检查 value 是否大于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();           
         }       
    })

});

演示：小提琴

Answer 2

尝试这个

$(document).ready(function(){

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

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

});

Answer 3

您不需要$在前面使用this.value... 并检查值本身而不是其长度...

这个

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

 应该

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

或者

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

所以你的最终代码应该是

$(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();           
     }       
  })

});

Answer 4

尝试这个

$(document).ready(function(){

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

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

});

Answer 5

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

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