选择收音机后隐藏div

问题描述：

我正在处理以下代码，我希望只有当选择收音机Mobile Money时才会显示输入number。选择收音机后隐藏div

脚本：

$(document).ready(function() { 
    $('input[type="radio"]').click(function() { 
    if ($(this).attr('id') == 'mobilemoney') { 
     $('#mobilemoneynumber').show(); 
    } else { 
     $('#mobilemoneynumber').hide(); 
    } 
    }); 
});

HTML：

<form class="form-basic" method="post" action="#"> 
    <div class="form-row"> 
    <label><span>Select one</span></label> 
    <div class="form-radio-buttons"> 
     <div> 
     <label> 
      <input type="radio" name="radio" id="mobilemoney"> 
      <span>Mobile Money</span> 
     </label> 
     </div> 
     <div> 
     <label> 
      <input type="radio" name="radio"> 
      <span>Cash on delivery</span> 
     </label> 
     </div> 
    </div> 
    </div> 
    <div class="form-row"> 
    <label> 
     <span>Number</span> 
     <input type="text" id="mobilemoneynumber" name="mobilemoneynumber"> 
    </label> 
    </div> 
    <div class="form-row"> 
    <button type="submit">Submit Form</button> 
    </div> 
</form>

通过在页面仅显示输入number默认的显示，我希望它默认显示。

我该怎么做？

答

增值两个无线电父元素：

<input type="radio" name="radio" value="mobilemoney"> 
<input type="radio" name="radio" value="cash">

的Jquery：

$('input[type="radio"]').click(function() { 
    if($(this).val() == 'mobilemoney') { 
     $('#mobilemoneynumber').show();   
    } 
    else { 
     $('#mobilemoneynumber').hide(); 
    } 
});

默认情况下，显示输入“＃mobilemoneynumber”。我有什么方法可以隐藏它吗？ –

yes add style =“display：none”;在该输入框中，并默认设置为货到付款单选按钮 –

答

Radio包裹在元素'form-row'中。哪个是input元素的父元素的前一个元素。

$('input[type="radio"]').click(function() { 
    if ($(this).attr('id') == 'mobilemoney') { 
    $(this).closest(".form-row").next().show(); 
    } else { 
    $(this).closest(".form-row").next().hide(); 
    } 
});

Fiddle

closest(".form-row")将返回其具有类名form-row

选择收音机后隐藏div

相关推荐