Question

I have the following form:

<form>
  <input type="radio" name="options" value="option_1" id="option1" checked="checked">
  <label for="options">Option 1</label>
  <div class="first-option">
  </div>
  <input type="radio" name="options" value="option_2" id="option2">
  <label for="option">Option 2</label>
  <div class="second-option">
</form>

So the first option is pre-selected. I want to add a class .option-checked to the dive first-option and second-option when the respective radio buttons are selected. I already tried .click(function) but it doesn't work in this case because the first one is already pre-selected and it should automatically have .option-checked class with it.

Answer 1

您可以使用$("input[name='options']").click和switch来实现此目的。

$(document).ready(function(){
	$("input[name='options']").click(function(){
		
		var value = $( this ).val();

                //Remove the class option-checked
		$( ".option-checked" ).removeClass( "option-checked" );
		
		switch( value ) {
			case 'option_1':
					$( ".first-option" ).addClass( "option-checked" );
				break;
			case 'option_2':
					$( ".second-option" ).addClass( "option-checked" );
				break;
		}
		
	});
});

.option-checked {
		background-color : red;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
  <input type="radio" name="options" value="option_1" id="option1" checked="checked" />
  <label for="options">Option 1</label>
  <div class="first-option option-checked">first-option</div>
  <input type="radio" name="options" value="option_2" id="option2" />
  <label for="option">Option 2</label>
  <div class="second-option">second-option</div>
</form>

另一个选项（更短的选项）也是在div的无线电输入上添加数据属性，以便您可以识别swith

$(document).ready(function() {
  $("input[name='options']").click(function() {
    var option = $(this).data("option");
    $(".option-checked").removeClass("option-checked");
    $("." + option).addClass("option-checked");
  });
});

.option-checked {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form>
  <input type="radio" name="options" value="option_1" id="option1" checked="checked" data-option="first-option" />
  <label for="options">Option 1</label>
  <div class="first-option option-checked">first-option</div>
  <input type="radio" name="options" value="option_2" id="option2" data-option="second-option" />
  <label for="option">Option 2</label>
  <div class="second-option">second-option</div>
</form>

Answer 2

You have to go through couple steps to make it happen. Initially your dig.first-option need to have the option-checked class hard coded, as the way the first radio is checked hard coded.

Then you need to create the JQuery .click() function that will remove the .option-clicked class from all the divs and then add the class to the appropriate div.

If this answer do not make the solution clear then, please create a fiddle with all the necessary code and we will make more specific help.

Add class to <div> when radio button is selected

2 个答案: