Question

HTML：

<form>
    <label>
        <input type="radio" name="news" value="right" id="right">Show News on the right
    </label>
    <br>
    <label>
        <input type="radio" name="news" value="left" id="left">Show News on the left
    </label>
    <br>
    <label>
        <input type="color" name="bgcolor" value="#ffffff">Set background color
    </label>
    <br>
    <label>
        <input type="checkbox" name="color_scheme" value="green" id="green">Show green colors
    </label>
    <br>
    <label>
        <input type="checkbox" name="color_scheme" value="red" id="red">Show red colors
    </label>    
</form>
<br>
<button>Customize!</button>

JS：

$(document).ready(function () {
    if ($('#green').prop('checked') == true) {
        $('body').css('background-color', 'green');
    }
});

嘿，我如何操纵复选框，这样当＆＃34;绿色＆＃34;时，它会将身体的背景颜色变为绿色。检查时，用红色做同样的事情，当检查两者时，选择绿色作为背景。此外，是否可以标记复选框并仅在＆＃34;自定义＆＃34;单击按钮？

Answer 1

只需使用.on()向所有input[type=checkbox]添加事件，然后检查是否已选中绿色？如果是设置为绿色，如果不是检查是否红色点击？如果是设置为红色，如果不是，则设置为无。（你可以用两行代码完成）

var bgColor = $('#green').is(':checked') ? 'green' : $('#red').is(':checked') ? 'red' : '';
 $('body').css('background-color', bgColor);

$(document).ready(function() {
  $('input[type=checkbox]').on('change', function() {
    var bgColor = $('#green').is(':checked') ? 'green' : $('#red').is(':checked') ? 'red' : '';
    $('body').css('background-color', bgColor);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>
    <input type="radio" name="news" value="right" id="right">Show News on the right</label>
  <br>
  <label>
    <input type="radio" name="news" value="left" id="left">Show News on the left</label>
  <br>
  <label>
    <input type="color" name="bgcolor" value="#ffffff">Set background color</label>
  <br>
  <label>
    <input type="checkbox" name="color_scheme" value="green" id="green">Show green colors</label>
  <br>
  <label>
    <input type="checkbox" name="color_scheme" value="red" id="red">Show red colors</label>
  <br>
</form>
<button>Customize!</button>

Answer 2

检查此fiddle是否适合您。

您需要将事件处理程序附加到复选框才能使其正常工作。请检查以下修改后的代码。

我已根据要求修改了代码。通过这种方式，即使添加了更多具有不同颜色的复选框，您也将获得所需的输出，并且将优先考虑绿色。

$(document).ready(function() {
$("input[name='color_scheme']").on("change", function() {

    if (this.checked && $("input[name='color_scheme']:checked").length == 1) {
        $('body').css('background-color', $(this).val());
    } else if ((this.checked && this.value === 'green') || $("input[name='color_scheme']:checked").length > 1) {
        $('body').css('background-color', 'green');
    } else if (!this.checked && $("input[name='color_scheme']:checked").length == 1) {
        $('body').css('background-color', $("input[name='color_scheme']:checked").val());
    } else {
        $('body').css('background-color', '');
    }

});
});

Answer 3

你可以这样做。但是如果选中复选框，则会出现问题。所以你应该选择单选按钮

$(document).ready(function() {
  // on button click,  get the selected checkbox by using name attribute
  $("#custom").click(function() {
    // get the value of the checkbox
    var checkedRadio = $('input[name="color_scheme"]:checked').val();
    // add the color
    $('body').css('background-color', checkedRadio);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label><input type="radio" name="news" value="right" id="right">Show News on the right</label><br>
  <label><input type="radio" name="news" value="left" id="left">Show News on the left</label><br>
  <label><input type="color" name="bgcolor" value="#ffffff">Set background color</label><br>
  <label><input type="checkbox" name="color_scheme" value="green" id="green">Show green colors</label><br>
  <label><input type="checkbox" name="color_scheme" value="red" id="red">Show red colors</label><br>
</form>
<button id="custom">Customize!</button>

Answer 4

试试这个，

＆＃13;

$(document).ready(function() {
  $('input[type=checkbox]').on('change', function() {
    var bg = 'white'; // default color is white
    if ($('#green').is(':checked')) { // if green is checked then show bg as green
      bg = 'green';
    } else if ($('#red').is(':checked')) { // else red
      bg = 'red';
    }
    $('body').css('background-color', bg);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <label>
    <input type="radio" name="news" value="right" id="right">Show News on the right</label>
  <br>
  <label>
    <input type="radio" name="news" value="left" id="left">Show News on the left</label>
  <br>
  <label>
    <input type="color" name="bgcolor" value="#ffffff">Set background color</label>
  <br>
  <label>
    <input type="checkbox" name="color_scheme" value="green" id="green">Show green colors</label>
  <br>
  <label>
    <input type="checkbox" name="color_scheme" value="red" id="red">Show red colors</label>
  <br>
</form>
<button>Customize!</button>

＆＃13;

Answer 5

试试这个。我希望它会对你有所帮助，因为它可能与你的要求完全一致。

var myItemsApp = angular.module('myItemsApp', []);

myItemsApp.factory('itemsFactory', ['$http', function($http) {
  var itemsFactory = {
    itemDetails: function() {
      return $http({
          url: "action.json",
          method: "GET",
        })
        .then(function(response) {
          return response.data;
        });
    }
  };
  return itemsFactory;

}]);


myItemsApp.controller('NavController', ['$scope', 'itemsFactory', function($scope, itemsFactory) {
  var promise = itemsFactory.itemDetails();

  promise.then(function(data) {
    $scope.itemDetails = data;
    console.log(data);
  });
  $scope.select = function(item) {
    $scope.selected = item;
  }
  $scope.selected = {};
}]);

JsFiddle也是如此 https://jsfiddle.net/69r5nmrw/2/

Answer 6

HTML：

$(document).ready(function() {
  $('input[type=checkbox]').on('change', function() {
    if($('#red').is(':checked')){
       if($('#green').is(':checked')){
          $('body').css('background-color', 'green');
       }else{
          $('body').css('background-color', 'red');
       }
    }else if($('#green').is(':checked')){
       $('body').css('background-color', 'green');
    }else{
       $('body').css('background-color', '#ffffff');
    }
  });
});

JS：

{{1}}

Answer 7

我认为你应该在这里使用CSS selectors的力量。不要使用JS/jQuery尽可能地操纵CSS，这会让您的生活更轻松。相信我。

<强> HTML

<label>
    <input type="checkbox" data-color="green">Green
</label>
<label>
    <input type="checkbox" data-color="red">Red
</label>
<p>
    <button type="button">Customize</button>
</p>

<强> CSS

body.red {
    background-color: red;
}

body[class*=green] {
    background-color: green;
}

<强> JS

$('button').on('click', function() {
    $('input').each(function() {
        var $this = $(this);
        $('body').toggleClass($this.data('color'), $this.is(':checked'));
    });
});

jsfiddle

使用jQuery

7 个答案: