Question

我有3个单选按钮，我希望每个选中的函数将活动类应用于页面上的某个元素，该元素将控制内容为“活动”。

我已经设法让活动类在一个无线电上工作，但是我在取消选中时无法删除该类，并且以有效的方式为其他两个单选按钮编写代码，因为我的JS知识基本为af。

这是我为一个工作的addClass所拥有的：

$("input#Beach").click(function () {
     if ($(this).is(":checked")) {
         $("#formBeach").addClass("active");
     }
});

再次，如何在未选中时删除此类？并包括另外两个收音机做同样的事情。

更新：这是收音机html

<ul class="form-group mb-0">
    <label>Choose your holiday: </label>
    <li>
        <input type="radio" id="Tour" name="holiday" checked>
        <label for="Tour">Tour</label>
    </li>
    <li>
        <input type="radio" id="Cruise" name="holiday">
        <label for="Cruise">Cruise</label>
   </li>
   <li>
        <input type="radio" id="Beach" name="holiday">
        <label for="Beach">Beach</label>
   </li>
</ul>

只是为了澄清，每个无线电控制一个表单，一次只能有一个表单“活动”，因此我需要'未选中'单选按钮从目标元素中删除活动类。

Answer 1

试试这个

$("input#Beach").click(function () {
     if ($(this).is(":checked")) {
         $("#formBeach").addClass("active");
     }else{
         $("#formBeach").removeClass("active");
   }
});

Answer 2

在您的特定情况下，甚至不需要检查checked属性。

$('.form-group > li').find('input').change(function(){
$('.form-group > li').find('label').addClass('hidden');
  if ($(this).is(":checked")) {
    $(this).parent().find('label').toggleClass('hidden');
  }
});

#formBeach {
  height: 50px;
  width: 50px;
  background: blue;
  display: none;
}

.active {
  display: block !important;
}

.hidden {
display: none;
}

$('.form-group > li').find('input')is(":checked")) {

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="form-group mb-0">
  <label>Choose your holiday: </label>
  <li>
    <input type="radio" id="Tour" name="holiday" checked>
    <label for="Tour" >Tour</label>
  </li>
  <li>
    <input type="radio" id="Cruise" name="holiday">
    <label for="Cruise" class='hidden'>Cruise</label>
  </li>
  <li>
    <input type="radio" id="Beach" name="holiday">
    <label for="Beach" class='hidden'>Beach</label>
  </li>
</ul>

Answer 3

这是你在尝试。@ louis

$(document).ready(function(){
	
	
	$("input#gender").click(function () {
     $('.genderspan').removeClass('active');
	 var activespan=$(this).attr('data-gender');
	 $('.'+activespan).addClass('active');
});

});

.genderspan.active{ color:#0C3;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<input type="radio" name="gender" id="gender"  data-gender='Male' value="male" checked> Male<br>
  <input type="radio" name="gender" id="gender" data-gender='Female'  value="female"> Female<br>
  <input type="radio" name="gender" id="gender"  data-gender='Other' value="other"> Other 
  
  <br>
  <span class="Male genderspan active">Male</span><br>
   <span class="Female genderspan">FeMale</span><br>
    <span class="Other genderspan">Other</span><br>

Answer 4

请在输入单选按钮＆amp;中添加一个公共std::list<int> stlList = { 1, 2, 3, 4, 5 }; MyList<int> intList; intList.insert(intList.begin(), 5, 0); // expected call to first insert intList.insert(intList.begin(), stlList.begin(), stlList.end()); // expected call to second insert。在该类上单击创建事件。我在您的输入单选按钮中添加了一些额外的class，用于匹配表单的parameters。

请保留表格的id和id单选按钮的值相同。

请找到您的更新代码：

data-form

请根据您的要求删除额外的代码。只需复制并替换您的代码。

希望，它可能对你有用。

Answer 5

为您的ul元素添加ID

 <ul id="holidays" class="form-group mb-0">
    <label>Choose your holiday: </label>
    <li>
        <input type="radio" id="Tour" name="holiday" checked>
        <label for="Tour">Tour</label>
    </li>
    <li>
        <input type="radio" id="Cruise" name="holiday">
        <label for="Cruise">Cruise</label>
   </li>
   <li>
        <input type="radio" id="Beach" name="holiday">
        <label for="Beach">Beach</label>
   </li>
</ul>

然后：

$("#holidays :input").click(function () {
    $("#holidays :input").each(function() {
      if ($(this).is(":checked")) {
        $("#form" + $(this).attr("id")).addClass("active");
      } else {
        $("#form" + $(this).attr("id")).removeClass("active");
      }
    });
});

希望它有所帮助。

根据要检查的单选按钮，在页面上的元素上添加和删除活动类

5 个答案: