检查单选按钮值是否存在

Question

我想检查单选按钮值“生日”是否存在并显示该单选按钮（所有单选按钮都被隐藏）。 “fl”是包含所有单选按钮的父项 div（我多次使用“fl”，这很有效）。不幸的是，对于“radiotoshow.length”，警报总是显示 0 “fl”中的一个单选按钮具有值“生日”（单选按钮文本是生日，我猜它是值......）但它不起作用。任何想法将不胜感激。我在循环中动态创建单选按钮，液体（shopify）。 tagName 在一种情况下是“生日”。

HTML:

<li  class="sidebarfilters">
   <label class="sidebar-checkboxlabel">
      <input  class="radio-btn" id={{tag | handleize }} type="radio" onClick="" name= {{ ghosttown }}>
        {{ tagName }}
   </label>
</li>

JS:

var radiotoshow = fl.find("input[type=radio][value='birthday']");
alert(radiotoshow.length);
if (radiotoshow.length > 0) {
  this.show();
}

Answer 1

您的代码中类型和值属性之间存在 space 问题，请检查单选按钮的值。区分大小写。

var fl = $("#fl");

var radiotoshow = fl.find("input[type=radio][value='Birthday']");
alert(radiotoshow.length);
if (radiotoshow.length > 0) {
  $("#msg").html(`Birthday Radio is available`).show();
}else {
  $("#msg").html(`Birthday Radio is not available`).show();
}

#fl input[type="radio"]{
  display: none;
}
#msg {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="fl">
    <input type="radio" name="r1" id="" value="Birthday">
    <input type="radio" name="r1" id="" value="Sunday">
    <input type="radio" name="r1" id="" value="Friday">
  </div>
  <h1 id="msg"></h1>
  
</body>
</html>

检查单选按钮值是否存在

Check if radio button value exists

javascript

radio-button