点击时如何获取未选中复选框的值？

Question

当单选框被选中和取消选中时，我希望能获取其值。我目前正在使用codeigniter框架。当点击单选框时，我可以获取其值，但是当点击未选中的框时，我无法获取其值。请帮帮我！我的代码如下。

    <table>
    <thead>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>
            <input name="feature" type="checkbox" id="10" value="10" />
          </td>

          <td>
            <input name="feature" type="checkbox" id="11" value="11" />    
          </td>

          <td>
            <input name="feature" type="checkbox" id="12" value="12" />    
          </td>

          <td>
            <input name="feature" type="checkbox" id="13" value="13" />    
          </td>
        </tr>
    </tbody>    
</table>



<script type="text/javascript">
    $("input:checkbox").change(function() {
        var someObj = {};
        someObj.fruitsGranted = [];
        var feature , key;

        $("input:checkbox").each(function() {
            if ($(this).is(":checked")) {
                key = someObj.fruitsGranted.push($(this).attr("feature"));
                someObj.fruitsGranted.push($(this).attr("id"));
                feature = $(this).attr("id");
                //key = $(this).attr("feature");
            } 
        });

        alert("GRANTED: " + feature + " ok " + key);
    });
</script>

- Shreyas Heda

---

你的代码尝试似乎与你的要求不符合。$("input:checkbox").change(function() { if (!$(this).is(":checked") { $(this).attr("id") ... - undefined

通过添加$("input:checkbox").each(，你的键/特征将始终来自于最后一个复选框。移除.each并使用$(this).is(":checked")来判断当前的复选框是否被选中。 - undefined

@freedomn-m 谢谢你的评论，但是我需要在复选框未被选中时获取其值...目前我只能在它被选中时获取到值！ - undefined

我不确定有什么区别。change事件对于选中/取消选中都会触发，并且this将是复选框 - 所以$(this).val()是其值，上面的链接和注释显示它是否被选中。 - undefined

Answer 1

change函数将在当前复选框选择/取消选择时执行。因此，在每个函数之前，您可以提取该信息。

$("input:checkbox").change(function() {
    var someObj = {};
    someObj.fruitsGranted = [];
    var feature , key;
    // you may extract all info from $(this) here on check/uncheck
    alert("Checked " + $(this).is(":checked"));
    // your rest code
});

你可能正在尝试实现类似购物车的功能。简化你的逻辑。

// Declare data variables outside
var someObj = {};
someObj.fruitsGranted = [];

// register event for all checkboxes
$("input:checkbox").change(function() {
    var feature , key;
    if ($(this).is(":checked")) {
        // get key/value and push into declared object's array
        // alert if needed : alert("GRANTED: " + feature + " ok " + key);
    } else {
        // on uncheck
        // get key/value and remove from object's array
       // alert if needed : alert("REVOKED: " + feature + " ok " + key);
    }
});

- Bilal Siddiqui

Answer 2

要找出未选中的复选框值，您可以尝试这个方法：

<script type="text/javascript">
    $("input:checkbox").change(function() {
        var someObj = [];
        $("input:checkbox").each(function() {
            console.log($(this).prop('checked'));
            if ($(this).prop('checked') === false) {
                someObj.push({feature:$(this).attr('id'),key:$(this).val()});
            } 
        });
        console.log(someObj);
    });
</script>

- ankit singh