Оптимизация js -Сохранение значений из флажков в объекте

Я довольно новичок в js, и я бы хотел оптимизировать свой код. У меня есть группа флажков, и их булевские значения сохраняются в объекте для дальнейших вычислений.Оптимизация js -Сохранение значений из флажков в объекте

HTML:

<fieldset> 
    <input type="checkbox" id="checkbox1" onchange="checkbox1Changed()" value="checkbox1"> 

    <input type="checkbox" id="checkbox2" onchange="checkbox2Changed()" value="checkbox2"> 

    <input type="checkbox" id="checkbox3" onchange="checkbox3Changed()" value="checkbox3"> 
</fieldset>

JS:

//store values for further computation 

var boxValues = { 
    box1: false, 
    box2: false, 
    box3: false, 
} 

//get checkboxvalues from view 

var checkbox1 = document.getElementById("checkbox1"); 
var checkbox2 = document.getElementById("checkbox2"); 
var checkbox3 = document.getElementById("checkbox3"); 

//update values in boxValues 

function checkbox1Changed() { 
    if (checkbox1.checked) { 
     boxValues.box1 = true; 
    } else { 
     boxValues.box1 = false; 
    } 
} 

function checkbox2Changed() { 
    if (checkbox2.checked) { 
     boxValues.box2 = true; 
    } else { 
     boxValues.box2 = false; 
    } 
} 

function checkbox3Changed() { 
    if (checkbox3.checked) { 
     boxValues.box3 = true; 
    } else { 
     boxValues.box3 = false; 
    } 
}

Поскольку я планирую иметь приблизительно 20 флажков зрения было бы много повторения кода. Кто-нибудь знает более умный способ сделать это?

Заранее благодарен!

Vin

источник

2015-08-04 Vin Banton

ли вы на самом деле с помощью JQuery или же добавить этот тег в результате несчастного случая/привычки? Если вы не используете его, вам не нужно добавлять его только для этого кода, но вам может понадобиться удалить тег, чтобы вы не получали ответы, предполагающие, что вы уже используете jQuery. –

Если jquery служит цели, я не против использовать ее :) –

Добавить общий класс всем флажков
создать объект для значений всех флажков
Bind обработчика события флажков, используя общий класс
Обновить статус щелкнул флажок в обработчик события

Кроме того, на, это хорошая практика, чтобы связать события в javascript вместо встроенного в HTML.

var myObj = { 
 
    checkbox1: false, 
 
    checkbox2: false, 
 
    checkbox3: false 
 
}; 
 
$('.myCheckbox').on('change', function() { 
 
    var thisId = $(this).attr('id'); 
 

 
    myObj[thisId] = this.checked; 
 

 
    console.log(myObj); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<fieldset> 
 
    <input type="checkbox" id="checkbox1" value="checkbox1" class="myCheckbox"> 
 

 
    <input type="checkbox" id="checkbox2" value="checkbox2" class="myCheckbox"> 
 

 
    <input type="checkbox" id="checkbox3" value="checkbox3" class="myCheckbox"> 
 
</fieldset>

источник

2015-08-04 08:15:24 Tushar

спасибо, это работает! что мне нужно в поле «значение» для этого решения? Или я могу удалить его, так как используется «id»? –

@VinBanton Чтобы получить 'значение', вы можете использовать' $ (this) .val() 'в обработчике событий – Tushar

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

function onCheckBoxChanged(e){ 
    var sender = e.target; 
    boxValues[sender.id] = (sender.checked); 
}

Игра вокруг с этим должны вам сэкономить много набрав :)

источник

2015-08-04 08:15:21

Оптимизация js -Сохранение значений из флажков в объекте

ответ

Смежные вопросы