Question

我有两个单选按钮

USA
阿根廷

根据用户选择的内容，手机字段需要清除，并且需要采用不同的格式

我的手机格式正常工作我根本不知道如何根据他们选择的单选按钮清除tel字段

这是我的代码

<div>
    <legend>Country</legend>

    <input id="usa" name="country" type="radio">
    <label for="usa">United States</label>

    <input id="argentina" name="country" type="radio">
    <label for="argentina">Argentina</label>
</div>

<div>
    <label>Phone Number</label>
    <input id="phone" name="phone" class="phone" type="tel" />
    <input id="phone_arg" name="phone_arg" class="phone_arg" type="tel" />
    <span>Example: 123-456-7890 or 12-34-5678-9000</span>
</div>

我目前有两个手机字段，因此我可以使用屏蔽插件更改手机格式。但我希望能够使用一个字段

我的JS是

$(".phone").mask("999-999-9999", { placeholder: " " });
$(".phone_arg").mask("99-99-9999-9999", { placeholder: " " });

也许如果用户选择了阿根廷单选按钮，它会移除一个类并添加另一个类。请帮忙

这是一个小提琴http://jsfiddle.net/barrycorrigan/L92aph6p/1/

Answer 1

使用

if($('#usa').prop('checked'))
   $("#phone").unmask().mask("999-999-9999", { placeholder: " " });
else
   $("#phone").unmask().mask("99-99-9999-9999", { placeholder: " " });

当你执行它时，掩码会应用于该类的对象，如果你改变了类，那么该类的新对象不会被掩盖。

Answer 2

在每个设置适当蒙版的按钮上放置点击处理程序。

$("#usa").click(function() {
  $(".phone").mask("999-999-9999", {
    placeholder: " "
  });
    $("#example").text("123-456-7890");
});
$("#argentina").click(function() {
  $(".phone").mask("99-99-9999-9999", {
    placeholder: " "
  });
    $("#example").text("12-34-5678-9000");
});

$("#usa").click(); // Set default

Fiddle

根据哪个单选按钮清除文本字段

2 个答案: