我试图植入一个函数来显示复选框的名称（非值）。我在Ruby on Rail应用程序上。
所以我的jquery代码是
<script type="text/javascript">
$(document).ready(function () {
$('input[name="animaux"]').click(function () {
getSelectedCheckBoxes('animaux');
});
$('input[name="handicap"]').click(function () {
getSelectedCheckBoxes('handicap');
});
$('input[name="television"]').click(function () {
getSelectedCheckBoxes('television');
});
$('input[name="barbecue"]').click(function () {
getSelectedCheckBoxes('barbecue');
});
var getSelectedCheckBoxes = function (groupName) {
var result = $('input[name="' + groupName + '"]:checked');
if (result.length > 0) {
var resultString = "";
result.each(function () {
var selectedValue = $(this).val();
resultString += groupName + " - "
+ $('label[for="option-' + selectedValue + '"]').text() + "<br/>";
});
$('#divfilter').html(resultString);
}
else {
$('#divfilter').html("");
}
};
});
</script>
过滤器以
显示<div id="divfilter"></div>
复选框看起来像这样
<input type="checkbox" name="barbecue" id="barbecue" value="oui" class="barbecue" />
<input type="checkbox" name="handicap" id="handicap" value="oui" class="handicap" />
<input type="checkbox" name="animaux" id="animaux" value="oui" class="animaux" />
问题1： 当我选择一个有效的复选框时。但如果我选择2复选框，则第一个标签名称将替换为新标签名称。我想要那两个标签。我怎么能这样做？
问题2： 有什么想简化和干这个吗？
$('input[name="animaux"]').click(function () {
getSelectedCheckBoxes('animaux');
});
$('input[name="handicap"]').click(function () {
getSelectedCheckBoxes('handicap');
});
$('input[name="television"]').click(function () {
getSelectedCheckBoxes('television');
});
$('input[name="barbecue"]').click(function () {
getSelectedCheckBoxes('barbecue');
});
问题3： 有没有想过在名字之间植入十字架以“取消选择”？
感谢您的帮助！
对不起，我的英语不好，我是法国人......
答案 0 :(得分：2)
我建议：
// find and retrieve all <input> elements of
// 'type=checkbox':
var checkboxes = $('input[type=checkbox]');
// use the on() method to bind the anonymous function
// as the event-handler of the 'change' event:
checkboxes.on('change', function(){
// update the '#divfilter' element's text:
$('#divfilter').text(function(){
// we return the following as the new text:
// first we filter the checkboxes collection to
// retain only those that match the ':checked'
// pseudo-class, and then create a map:
return checkboxes.filter(':checked').map(function(){
// the contents of the map are comprised of
// the 'name' property of each checked check-box:
return this.name;
// we convert the map() into an Array, using get():
}).get()
// and join the Array elements together with the
// supplied String, and finished with a period:
.join(', ') + '.';
});
});
// find and retrieve all <input> elements of
// 'type=checkbox':
var checkboxes = $('input[type=checkbox]');
// use the on() method to bind the anonymous function
// as the event-handler of the 'change' event:
checkboxes.on('change', function() {
// update the '#divfilter' element's text:
$('#divfilter').text(function() {
// we return the following as the new text:
// first we filter the checkboxes collection to
// retain only those that match the ':checked'
// pseudo-class, and then create a map:
return checkboxes.filter(':checked').map(function() {
// the contents of the map are comprised of
// the 'name' property of each checked check-box:
return this.name;
// we convert the map() into an Array, using get():
}).get()
// and join the Array elements together with the
// supplied String, and finished with a period:
.join(', ') + '.';
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="barbecue" id="barbecue" value="oui" class="barbecue" />
<input type="checkbox" name="handicap" id="handicap" value="oui" class="handicap" />
<input type="checkbox" name="animaux" id="animaux" value="oui" class="animaux" />
<div id="divfilter"></div>
参考文献：