操縱複選框使用jQuery

HTML：操縱複選框使用jQuery

<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'); 
    } 
});

嘿，我怎麼操縱的複選框，這樣它會在「綠轉個身的背景顏色爲綠色「被選中，用紅色做同樣的事情，當兩者都被選中時，綠色被選作背景。此外，是否可以標記複選框並僅在單擊「自定義」按鈕時應用更改？

來源

2017-05-26 szubansky

只需使用.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>

來源

2017-05-26 04:52:29

還好，但如果兩者都選中，它必須是綠色的。如果沒有檢查 - 白色，所以它不會工作，我想 – szubansky

@szubansky這不適合你？差不多是 –

檢查這個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', ''); 
    } 

}); 
});

來源

2017-05-26 04:54:14

。我需要能夠檢查兩個盒子，綠色將優先於紅色在這種情況下 – szubansky

你可以這樣做。但是如果複選框被選中，問題就會出現。所以，你應該選擇單選按鈕

$(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>

來源

2017-05-26 04:58:01 brk

試試這個，

$(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); 
 
    }); 
 
});

<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>

來源

2017-05-26 05:08:06

嘗試。我希望它會幫助你，因爲它可能正好與你的要求相匹配。

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

的jsfiddle爲同一 https://jsfiddle.net/69r5nmrw/2/

來源

2017-05-26 05:10:01

@szubansky我更新了我的代碼..現在請檢查它 –

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><br> 
</form> 
<button>Customize!</button>

JS：

$(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'); 
    } 
    }); 
});

來源

2017-05-26 05:10:17

我認爲你應該在這裏使用的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; 
}

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

jsfiddle

來源

2017-05-26 05:33:12

操縱複選框使用jQuery

回答

相關問題