[英]radio buttons value change based on MySql Data
I am retrieving data from MySql with PHP. 我正在使用PHP从MySql检索数据。 Everything works fine but not with the radio buttons. 一切正常,但不能使用单选按钮。 What I would like to do is that as the text boxes values change, I would also like to change the value of the check box but leaving some check boxes values intact. 我想做的是,随着文本框值的更改,我也想更改复选框的值,但保留一些复选框的值不变。 Here are the codes: 以下是代码:
HTML: HTML:
<select id="userDropdown"></select>
<label>Name</label>
<input type="text" id="name" />
<label>Phone</label>
<input type="text" id="phone" />
**<p>
M:<input type="radio" class="flat" name="gender" id="gender" value="M" checked="" required />
F:<input type="radio" class="flat" name="gender" id="gender" value="F" />
</p>**
Javascript 使用Javascript
//sql data...
var data = [
{username: 'User 1', name: 'Bill', phone: '123-456-789', gender: 'male'},
{username: 'User 2', name: 'John', phone: '123-456-987', gender: 'male'},
{username: 'User 3', name: 'Mary', phone: '123-654-789', gender: 'female'}
];
var dropdown = $('#userDropdown');
dropdown.append('<option value="" >Select User</option>');
for(var i = 0; i < data.length; i++){
var item = data[i];
dropdown.append('<option value="' + item.username + '" >' + item.username + '</option>');
}
$('#userDropdown').change(function(){
var user = this.value;
var dataItem = $.grep(data, function(e){ return e.username == user; });
if(dataItem.length > 0){
$('#phone').val(dataItem[0].phone);
$('#name').val(dataItem[0].name);
$('#gender').val(dataItem[0].gender);
}
});
First you need to change your input radio values like this (with "male" and "female") to match with your sql data : 首先,您需要像这样更改输入单选值(使用“ male”和“ female”)以与您的sql数据匹配:
<p>
M:<input type="radio" class="flat" name="gender" id="gender" value="male" checked="" required />
F:<input type="radio" class="flat" name="gender" id="gender" value="female" />
</p>
Then change this line : 然后更改此行:
$('#gender').val(dataItem[0].gender);
like this : 像这样 :
$("input[name=gender][value=" + dataItem[0].gender + "]").attr('checked', 'checked');
or like this (since jQuery 1.6) : 或类似这样(自jQuery 1.6起):
$("input[name=gender][value=" + dataItem[0].gender + "]").prop('checked', true);
Get rid of the duplicate id and make it easy. 摆脱重复的ID,并使其变得容易。 HTML5 id specification here . HTML5 id规范在这里 。
HTML: HTML:
<p>
M:<input type="radio" class="flat" name="gender" id="gender-male" value="M" checked="" required />
F:<input type="radio" class="flat" name="gender" id="gender-female" value="F" />
</p>
Javascript: 使用Javascript:
if(dataItem.length > 0){
$('#phone').val(dataItem[0].phone);
$('#name').val(dataItem[0].name);
$('#gender-'+dataItem[0].gender).prop('checked', true);
}
This is what I would do in your change
function: 这是我要在您的change
函数中执行的操作:
dropdown.change(function () {
var user = this.value;
var dataItem = $.grep(data, function (e) {
return e.username == user;
});
if (dataItem.length > 0) {
var $m_input= $('input[name="gender"][value="M"]');
var $f_input= $('input[name="gender"][value="F"]');
if(dataItem[0].gender === "male"){
$m_input.prop('checked', true);
$f_input.prop('checked', false);
} else {
$m_input.prop('checked', false);
$f_input.prop('checked', true);
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.