если флажок установлен, сделайте это



когда я устанавливаю флажок, я хочу, чтобы он повернулся <p>#0099ff.



когда я снимаю флажок, я хочу, чтобы отменить это.



код у меня есть до сих пор:



$('#checkbox').click(function(){
if ($('#checkbox').attr('checked')) {
/* NOT SURE WHAT TO DO HERE */
}
})
705   11  

11 ответов:

Я бы использовать.change() и this.checked:

$('#checkbox').change(function(){
    var c = this.checked ? '#f00' : '#09f';
    $('p').css('color', c);
});

--

С помощью this.checked
Энди Е сделал большую запись о том, как мы склонны злоупотреблять jQuery: используя удивительную силу jQuery для доступа к свойствам элемента. В статье специально рассматривается использование .attr("id") но в случае, если #checkboxи an <input type="checkbox" /> элемент проблема та же ибо $(...).attr('checked') (или даже $(...).is(':checked')) и this.checked.

попробуйте это.

$('#checkbox').click(function(){
    if (this.checked) {
        $('p').css('color', '#0099ff')
    }
}) 

иногда мы перебиваем jquery. Многие вещи могут быть достигнуты с помощью jquery с простым javascript.

может случиться ,что " это.проверено "всегда"включено". Поэтому я рекомендую:

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});

лучше, если вы определяете класс с другим цветом, а затем переключаете класс

$('#checkbox').click(function(){
    var chk = $(this);
    $('p').toggleClass('selected', chk.attr('checked'));
}) 

таким образом, ваш код чище, потому что вам не нужно указывать все свойства css (скажем, вы хотите добавить границу, стиль текста или другое...) но вы просто переключаете класс

Я нашел сумасшедшее решение для решения этой проблемы флажка не проверено или проверено вот мой алгоритм... создайте глобальную переменную, скажем var check_holder

check_holder имеет 3 состояния

  1. неопределено государства
  2. 0 состояние
  3. 1 состояние

если флажок установлен,

$(document).on("click","#check",function(){
    if(typeof(check_holder)=="undefined"){
          //this means that it is the first time and the check is going to be checked
          //do something
          check_holder=1; //indicates that the is checked,it is in checked state
    }
    else if(check_holder==1){
          //do something when the check is going to be unchecked
          check_holder=0; //it means that it is not checked,it is in unchecked state
    }
     else if(check_holder==0){
            //do something when the check is going to be checked
            check_holder=1;//indicates that it is in a checked state
     }
});

код выше может используйте во многих ситуациях, чтобы узнать, установлен ли флажок или нет. Концепция заключается в том, чтобы сохранить состояния флажка в переменной,т. е. когда он включен, выключен. я надеюсь, что логика может быть использована для решения вашей проблемы.

проверьте этот код:

<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
    if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
        alert("checked");
    }
    else if($(this).prop("checked") == false){
        alert("Checkbox is unchecked.");
    }
});
</script>
$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});

Вероятно, вы можете пойти с этим кодом, чтобы принять меры, как флажок установлен или снят.

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});

Я бы сделал :

$('#checkbox').on("change", function (e){ 

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

см.:https://www.w3schools.com/jsref/prop_checkbox_checked.asp

оптимальной реализации

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});

демо

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" /> 
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est
    laborum.
</p>

почему бы не использовать встроенные события?

$('#checkbox').click(function(e){
    if(e.target.checked) {
     // code to run if checked
        console.log('Checked');

     } else {

     //code to run if unchecked
        console.log('Unchecked');
     }
});

Comments

    Ничего не найдено.