Question

我仍处于倾向于jquery的早期过程中，所以请保持温和。

请参阅附件代码：

HTML：

<div id="page-container" class="green-background">

<form name="input" action="html_form_action.asp" class="form1" method="get">
<input type="radio" name="background" value="blue">Blue<br>
<input type="radio" name="background" value="red">Red<br>
<input type="submit" value="Submit">
</form>

</div><!-- /#page-container -->

jquery的：

jQuery(document).ready(function($) {
var searchText = 'blue';

 $('.form1 input[type="radio"]').click(function(){
if ($(this).is(':checked'))
{
  var dummy = $(this).val() === searchText;
}
$(this).removeClass('blue-background');
});});

默认情况下，页面容器将具有绿色背景类名，如果我选择蓝色单选按钮，它会将类名更改为蓝色背景。我还希望html保存，以便蓝色背景将成为默认值。我似乎无法让我的jquery工作。

Answer 1

这是你的意思吗？

http://jsfiddle.net/5jqbR/2/ jQuery的

$(document).ready(function(){

$('input[type=radio]').on("change", function(){
        //$(this) is equal to whatever your selected.
        var valueClass = $(this).val(); //get the new css color from the value field on the radio
        $('#page-container').removeClass(); //removes all classes from the div
        $('#page-container').addClass(valueClass); //set the new click
    });
});

HTML：

<form name="input" action="html_form_action.asp" class="form1" method="get">
<input type="radio" name="background" value="blue-background">Blue<br>
<input type="radio" name="background" value="red-background">Red<br>
<input type="submit" value="Submit">
</form>

</div>

你快到了。我想你过去了。记住你的选择器。你不需要检查哪一个是“：checked”，因为你绑定了所有这些，但它只会触发你改变的那个。

Answer 2

我认为这是一个很好的例子，我们可以使用.attr（）函数。您可以使用attr选择HTML元素中的任何属性，包括类。语法是$（'your_element'）。attr（var1，var2）;

var1：你的属性，例如（name，class，src，id）

var2：value（仅用于更改属性）

此处：http://jsfiddle.net/R8vF3/

HTML：

<body id="body1" class="green-background">
    <form name="input" action="html_form_action.asp" class="form1" method="get">
       <input type="radio" name="background" value="blue-background">Blue
       <br>
       <input type="radio" name="background" value="red-background">Red
       <br>
       <input type="submit" value="Submit">
   </form>
</body>

使用Javascript：

$(document).ready(function () {
    $('input[type=radio]').on("change", function () {
        var radio_name = $(this).val(); //get the value of radio button
        $('#body1').attr('class', radio_name); //changes class to radio value
    });
});

根据复选框选择更改背景颜色并保存html

2 个答案: